D3.js - 如何在缩放半径时保持力导向布局在边界内

Question

目前，我有一个力导向布局，如果数据太大，节点和链接就会超出我的 svg 边界。我的刻度函数包括：

node
    .attr('cx', function(d) {return d.x})
    .attr('cy', function(d) {return d.y})

我确实看到了建议的参考资料：

node
    .attr("cx", function(d) { return d.x = Math.max(radius, Math.min(width - radius, d.x)); })
    .attr("cy", function(d) { return d.y = Math.max(radius, Math.min(height - radius, d.y)); });

我的节点半径使用以下比例：

var scaleR = d3.scaleSqrt()
                .domain(d3.extent(graph.nodes, function(d) {return d.frequency})
                .range([1,20])

如何在刻度函数中引用每个节点的半径？

提前致谢

Answer 1

使用以下代码，用 scaleR 函数替换半径值：

node
    .attr("cx", function(d) { return d.x = Math.max(scaleR(d.frequency) , Math.min(width - scaleR(d.frequency), d.x)); })
    .attr("cy", function(d) { return d.y = Math.max(scaleR(d.frequency) , Math.min(height - scaleR(d.frequency), d.y)); });