树形布局中的 d3.js 链接分离答案

【问题标题】：d3.js link seperation in tree layout树形布局中的 d3.js 链接分离
【发布时间】：2015-02-27 20:11:28
【问题描述】：

我要做的是在节点名称适合的 d3.js 树布局的链接之间留出一个间隙（参见图片）。

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

我的图表与此示例类似：http://bl.ocks.org/mbostock/4063550 我试图改变的是投影中的 d.y。

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

这会导致父链接和子链接都发生变化。我确信有一个简单的解决方案，但我现在不明白。

感谢您的帮助。

【问题讨论】：

听起来更容易添加带有rect 或类似背景的文本，使其看起来好像断线一样。
嗨，拉斯，谢谢。马克提出了同样的建议，所以下面的答案。怎么会这么难拆分这些？无论如何，它们是两条分开的线...

标签： javascript d3.js tree line

【解决方案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);

例如here。

【讨论】：

嗨，马克，感谢您的回答。是的，我想到了文本背后的 rect 元素。但这样做有两个问题。这种技术隐藏了线条与单词汇合的区域。它隐藏在矩形后面。第二个问题是我正在处理的文件中的背景有渐变。白色或任何其他颜色的矩形都无济于事。我真的需要按文本的长度来分割行。