d3.js鏈接樹形布局中的分隔

Question

我想要做的是在節點名稱適合的d3.js樹布局的鏈接之間有一個間隙（見圖）。

http://s15.postimg.org/xn1eenxh7/linesplit.jpg

我的圖看起來類似於這個例子： http ： //bl.ocks.org/mbostock/4063550我試圖改變的是投影中的dy。

var diagonal = d3.svg.diagonal.radial()
.projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });

這導致父鏈接和子鏈接的更改。 我確信這有一個簡單的解決方案，但我現在還不能解決。

謝謝你的幫助。

Answer 1

要移動文本，請不要在投影中進行，而是在轉換文本所在的g容器中：

var node = svg.selectAll(".node")
  .data(nodes)
  .enter().append("g")
  .attr("class", "node")
  .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + (d.y - 50) + ")"; }) //<-- -50 moves it

要打破這一行，請在容器中添加一個填充的白色矩形：

node.append("rect")
  .attr('width', 32)
  .attr('height',15)
  .attr('fill', 'white')
  .attr('y', -7.5);

這里的例子。