Question

J'essaie de modifier dynamiquement les détails de la simulation dans le D3 exemple à https://github.com/mbostock/d3/blob/master/examples/force/force-multi-foci.html. J'ai mis une case à cocher, puis j'attribue le gestionnaire de tick dynamiquement comme suivant (code complet à http://pastebin.com/k4p0uzhk) :

$("#chkBox").change(function(){
  if ($(this).is(':checked')) {
    force.on("tick", forceTick);
  } else {
    force.on("tick", forceTick2);
  }
});

forceTick = function(e) {
  // Push different nodes in different directions for clustering.
  var ky = 400 * e.alpha;
  var kx = 20 * e.alpha;
  hLinks.forEach(function(hlink) {
    var yB = hlink.source.y, yT = hlink.target.y;
    if (yB<(yT+20)) { hlink.source.y += Math.min(ky,yT+20-yB); hlink.target.y -= Math.min(ky,yT+20-yB);}
    var xB = hlink.source.x, xT = hlink.target.x;
    if (xB<(xT-20)) { hlink.source.x += Math.min(kx,xT-20-xB); hlink.target.x -= Math.min(kx,xT-20-xB);}
    if (xB>(xT+20)) { hlink.source.x -= Math.min(kx,xB-xT-20); hlink.target.x += Math.min(kx,xB-xT-20);}

  });

  node.attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });

  link.attr("x1", function(d) { return d.source.x; })
       .attr("y1", function(d) { return d.source.y; })
       .attr("x2", function(d) { return d.target.x; })
       .attr("y2", function(d) { return d.target.y; });
};


forceTick2 = function(e) {

  node.attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });

  link.attr("x1", function(d) { return d.source.x; })
       .attr("y1", function(d) { return d.source.y; })
       .attr("x2", function(d) { return d.target.x; })
       .attr("y2", function(d) { return d.target.y; });
};

Mais en fait, il semble que seul le gestionnaire ait donné d'abord fonctionne. Existe-t-il un moyen de contrôler dynamiquement la simulation?

Pas de solution correcte

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top