在路徑上插入節點並根據路徑改變距離

Question

我需要做的是在路徑上插入節點（或者只是沒有路徑的座標），這將尊重節點位置（例如node.x和node.y）和根據它們的數量動態地重新計算它們的距離。

我想：

d3.scale.linear().domain([0,width]).range([height, 0]); 

但它只計算SVG元素對角線。有沒有辦法如何實現這一點？爲了更好地理解我想要做什麼，我附上了一幅圖像插圖。更好的辦法是將節點放在非線性路徑上，但我無法弄清楚如何做到這一點。

感謝

盧卡斯

Answer 1

我設法通過其計數減少節點的距離來實現這一行爲，並動態地計算基於對角線路徑legth新的。我想補充的路徑，這是隱藏了這樣的用戶：

var points = [ 
       [0, height], 
       [width, 0]                
       ]; 


      var pth = svg.append("path") 
       .data([[points]]) 
       .attr("class","diag") 
       .attr("d", d3.svg.line() 
       .tension(1) 
       // Catmull–Rom 
       .interpolate("basis")); 

計算它的長度：

halfDiagLength = pth.node().getTotalLength()/2; 

然後sipmly得到新的距離。 之後，設置x和y座標，利用對角線功能：

var x = d3.scale.linear().domain([0,width]).range([height, 0]);  
n.x = Math.round(l.source.x)+linkLength; 
n.y = x(n.x); 

希望它可以幫助別人。

Lukas