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