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