d3.js：在樹佈局modifyng鏈接

和我的英語不好對不起...... 我使用這裏的例子：http://bl.ocks.org/mbostock/4339083 建立一個樹形圖，但我改變了圓根的孩子用RECT。現在這個圖有點麻煩，因爲我看到鏈接通過矩形。我想要這些鏈接開始和停止到矩形的兩側。我想我必須修改代碼對角線路徑產生：d3.js：在樹佈局modifyng鏈接

// Update the links… 
var nodeLinks = tree.links(nodes); 
var link = vis.selectAll("path.link") 
    .data(nodeLinks, function(d) { return d.target.id; }); 

// Enter any new links at the parent's previous position. 
link.enter().insert("svg:path", "g") 
    .attr("class", "link") 
    .attr("d", function(d) { 
    var o = {x: source.x0, y: source.y0}; 
    return diagonal({source: o, target: o}); 
}) 
.transition() 
    .duration(duration) 
    .attr("d", diagonal); 

// Transition links to their new position. 
link.transition() 
    .duration(duration) 
    .attr("d", diagonal); 

// Transition exiting nodes to the parent's new position. 
link.exit().transition() 
    .duration(duration) 
    .attr("d", function(d) { 
    var o = {x: source.x, y: source.y}; 
    return diagonal({source: o, target: o}); 
    }) 
    .remove();

，但我無法弄清楚如何。我在API參考中看到了diagonal.source([source])和 ,diagonal.target([target])方法。也許他們可以幫助我，但我不明白如何使用它。有人可以幫我嗎？

來源

2013-11-25 MrBebop

您需要做的只是通過矩形的寬度偏移路徑的開始和結束。有什麼需要修改的是：

var diagonal = d3.svg.diagonal() 
    .projection(function(d) { return [d.y, d.x]; });

假設w是你的矩形的寬度，新的代碼應該是這個樣子。

var diagonal = d3.svg.diagonal() 
    .projection(function(d) { return [d.y, d.x - w]; });

來源

2013-11-26 09:22:35

拉爾斯，謝謝你的答覆！ – MrBebop

嗨拉爾斯，你的方法不正好抵消了一個鏈接結束而另一個開始的點嗎？即他們仍然是連接的（至少這是一個小實驗似乎顯示）。我認爲@MrBeboop希望一個鏈接的末端位於矩形的一側，下一個鏈接的開始位於矩形的另一側。我認爲他認爲源/目標方法需要使用是正確的，但我無法弄清楚。 – d3noob

有可能這個問題[這裏]（http://stackoverflow.com/questions/41915127/direction-of-link-orientation-in-tree-diagram-incorrect）也可能會增加一些價值。 – d3noob

d3.js：在樹佈局modifyng鏈接

回答

相關問題