Diseño dirigido a la fuerza central después de la marca utilizando el nodo raíz (regresar al centro)
-
28-10-2019 - |
Pregunta
Estoy experimentando con el diseño dirigido por la fuerza usando d3.js. Lo que necesito es centrar el diseño por raíz (u otro nodo seleccionado) y devuelve este nodo al centro SVG (por ejemplo, lienzo) después de que se realiza la función de garrapata (el gráfico alfa es bajo). ¿Es posible? Encontré un ejemplo en
Pero no puedo hacer que la raíz (cuando use APLHA u otro cálculo de la función de tics personalizada) regrese al centro (Center el diseño por este nodo particular).
Cualquier ayuda sería apreciada.
Solución
En realidad, resolví esto así (similar a la anterior pero más sofisticada):
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+")";
}
);
});
Otros consejos
Intenta cambiar el controlador de eventos de fuerza así:
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; });
});
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow