Redimensionner D3 ForceSimulation sur d3.vs4

Question

J'essaie de mettre à jour la simulation d'un graphique à bulles lorsque la fenêtre est redimensionnée. Jusqu'à présent, le rayon des bulles se redimensionne mais les coordonnées de cx ne se mettent pas à jour et les bulles restent là où elles ont été rendues pour la première fois.

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

vous devez redémarrer votre simulation de force avec la méthode .restart(), et jouer avec la valeur .alpha() ou .alphaTarget(). Votre code a une duplication inutile.

Peut-être que quelque chose comme ce qui suit peut fonctionner pour votre cas d'utilisation?

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() 
 

 
}