Modification dynamique de la simulation de mise en page JavaScript D3
-
30-10-2019 - |
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