D3. js - Как сохранить макет с направлением силы в границах при масштабировании радиуса

Question

В настоящее время у меня есть сило-направленный макет, в котором узлы и ссылки go выходят за границы 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)); });