D3适应屏幕大小的节点布局

Question

我有一个简单的D3图表，但是我遇到了困难，因为节点不会保持在SVG的边界内。我已经给它们设置了高度和宽度，但当节点渲染时，它们超出了所分配的高度和宽度，因此无法看到。

let height = 500; 
let width = 960;

this.svg = d3.select("networkView").append("svg")
    .attr("width", width)
    .attr("height", height);

this.force = d3.layout.force()
    .gravity(.05)
    .charge(-240)
    .linkDistance(50)
    .size([width, height]);

let node = this.svg.selectAll(".node")
    .data(jsonNodes)
    .enter().append("g")
    .attr("class", "node")
    .call(this.force.drag);

node.append("circle")
    .attr("r","10");

node.append("text")
    .attr("dx", 0)
    .attr("dy", "2.5em")
    .text(function(d) { return d.name })
    .call(this.force.drag);

this.force
   .nodes(jsonNodes)
   .start();

this.force.on("tick", function() {
    node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
});

- illwalkwithyou

Answer 1

这里存在一个概念上的误解。 size() 不会限制您的节点。根据API，它只会：

...将可用的布局大小设置为表示 x 和 y 的指定两个元素数组[...] 大小影响力导向布局的两个方面：重力中心和初始随机位置。

一个可能的解决方案是使用这个简单的数学公式：

node.attr("transform", function(d) {
    return "translate(" + (d.x = Math.max(0, Math.min(width, d.x))) + "," 
    + (d.y = Math.max(0, Math.min(height, d.y))) + ")"
});

如果您想考虑到圆的半径（现在是10），则变为：

node.attr("transform", function(d) {
    return "translate(" + (d.x = Math.max(10, Math.min(width - 10, d.x))) + "," 
    + (d.y = Math.max(10, Math.min(height - 10, d.y))) + ")"
});

- Gerardo Furtado