javascript - tablas - Cambio de tamaño del diseño de la fuerza D3

title css

Question

¿Es posible cambiar el tamaño de un diseño de fuerza en d3.js? Por ejemplo, tengo un diseño definido por

var force = d3.layout.force()
.nodes(documents.nodes)
.linkDistance(0)
.friction(.2)
.size([width, height]);

force.start();

y deseo cambiar el tamaño más adelante en el proyecto. es posible?

Answer 1

De acuerdo con la documentación , el parámetro .size() del diseño de fuerza afecta solo el centro de gravedad y la distribución inicial de los nodos, no el espacio disponible. Tendrá que imponer cualquier restricción sobre usted mismo, por ejemplo, en la función de tick :

force.on("tick", function() {
    node.attr("cx", function(d) { return Math.min(maxX, Math.max(minX, d.x)); })
        .attr("cy", function(d) { return Math.min(maxY, Math.max(minY, d.y)); });
}

Answer 2

En breve, en un evento de cambio de tamaño debe cambiar los atributos de su objeto svg (también cambia el centro de gravedad) y reanudar los cálculos de fuerza:

window.onresize = function() {
  width = window.innerWidth, height = window.innerHeight;
  svg.attr(''width'', width).attr(''height'', height);
  force.size([width, height]).resume();
};

Un ejemplo para el cambio de tamaño de fuerza d3 se proporciona aquí .