调整D3力布局的大小

Question

Is it possible to resize a force layout in d3.js? For example, I have a layout defined by

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

force.start();

and I wish to resize it later in the project. Is this possible?

Answer 1

Shortly, on a resize event you should change the attributes of your svg object (it changes also the center of gravity) and resume force calculations:

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

An example for the d3 force resize is provided here .

Answer 2

According to the documentation , the .size() parameter of the force layout affects only the center of gravity and initial distribution of nodes, not the space available. You will have to enforce any constraints on that yourself, eg in the tick function:

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)); });
}