Centre de la force dirigée disposition après noeud racine en utilisant les tiques (retour au centre)
-
28-10-2019 - |
Question
J'expérimente avec force dirigée en utilisant la mise en page D3.js. Ce que je besoin est le centre de la mise en page par racine (ou un autre nœud sélectionné) et retourner ce noeud au centre svg (par exemple la toile) après que la fonction tique est fait (le graphique alpha est faible). C'est possible? J'ai trouvé un exemple à
mais je suis incapable de faire la racine (lors de l'utilisation APLHA ou tout autre calcul de la fonction tique personnalisée) de retour de retour au centre (centre de la mise en page par ce noeud particulier).
Toute aide serait appréciée.
La solution
En fait, je résolu ce comme ça (semblable à précédente, mais plus sophistiqué):
force.on("tick", function(e) {
node.attr("transform", function(d) {
//TODO move these constants to the header section
//center the center (root) node when graph is cooling down
if(d.index==0){
damper = 0.1;
d.x = d.x + (w/2 - d.x) * (damper + 0.71) * e.alpha;
d.y = d.y + (h/2 - d.y) * (damper + 0.71) * e.alpha;
}
//start is initiated when importing nodes from XML
if(d.start === true){
d.x = w/2;
d.y = h/2;
d.start = false;
}
r = d.name.length;
//these setting are used for bounding box, see [http://blockses.appspot.com/1129492][1]
d.x = Math.max(r, Math.min(w - r, d.x));
d.y = Math.max(r, Math.min(h - r, d.y));
return "translate("+d.x+","+d.y+")";
}
);
});
Autres conseils
Essayez de changer le gestionnaire d'événements de force comme ceci:
force.on("tick", function(e) {
nodes[0].x = w / 2;
nodes[0].y = h / 2;
var k = 0.05 * e.alpha;
nodes.forEach(function(o, i) {
o.y += (nodes[0].y - o.y) * k;
o.x += (nodes[0].x - o.x) * k;
});
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; });
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});