Question

我有一个简单的D3 Graph，但我很挣扎，但由于某种原因，节点不会停留在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 + ")"; });
});

Answer 1

这里有一个概念上的误解。 size()不会限制您的节点。根据{{3}}，它将简单地说：

...将可用的布局大小设置为指定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))) + ")"
});

D3适合屏幕上的节点

1 个答案: