d3.vs4에서 D3 ForceSimulation 크기 조정

Question

창 크기를 조정할 때 버블 차트의 시뮬레이션을 업데이트하려고합니다. 지금까지 버블의 반경이 조정되었지만 Cx 좌표가 업데이트되지 않고 버블이 처음 렌더링 된 위치에 남아 있습니다.

var simulation=d3.forceSimulation() 
      .force('x',d3.forceX(function(d){return xScale(d.n);})) 
      .force('y',d3.forceY(height)) 
      .force('collide',d3.forceCollide(function(d){return rScale(d.m);})); 
simulation.nodes(data) 
    .on('tick',ticked); 
function ticked(){ 
    dot 
     .attr('cx',function(d){return d.x;}) 
     .attr('cy',function(d){return d.y;}) 
} 

d3.select(window).on('resize',resize); 
function resize(){ 
    //get width of window 
    //update xScale and rScale 
    //update radius of bubbles 
    simulation 
     .force('x',d3.forceX(function(d){return xScale(d.n);})) 
     .force('y',d3.forceY(height)) 
     .force('collide',d3.forceCollide(function(d){return rScale(d.m);})); 
    simulation.nodes(data) 
     .on('tick',ticked); 
    function ticked(){ 
     dot 
      .attr('cx',function(d){return d.x;}) 
      .attr('cy',function(d){return d.y;}) 
    } 
} 

Answer 1

당신이 .restart() 메소드를 사용하여 강제로 시뮬레이션을 다시 시작하고 (α)() 또는 .alphaTarget() 값으로 놀러해야합니다

. 코드에 불필요한 중복이 있습니다.

다음과 같은 것이 유스 케이스에서 작동 할 수 있습니까?

var simulation=d3.forceSimulation() 
 
      .force('x',d3.forceX(function(d){return xScale(d.n);})) 
 
      .force('y',d3.forceY(height)) 
 
      .force('collide',d3.forceCollide(function(d){return rScale(d.m);})); 
 
simulation.nodes(data) 
 
    .on('tick',ticked); 
 
    
 
function ticked(){ 
 
    dot 
 
     .attr('cx',function(d){return d.x;}) 
 
     .attr('cy',function(d){return d.y;}) 
 
} 
 

 
d3.select(window).on('resize',resize); 
 
function resize(){ 
 
    //get width of window 
 
    //update xScale and rScale 
 
    //update radius of bubbles 
 
    simulation 
 
     .force('x',d3.forceX(function(d){return xScale(d.n);})) 
 
     .force('collide',d3.forceCollide(function(d){return rScale(d.m);})) 
 
     // 0.3 is arbitrary 
 
     .alpha(0.3) 
 
     .restart() 
 

 
}