Question

我试图做的是在节点名称适合的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]; });

这会导致父链接和子链接的更改。我确信有一个简单的解决方案，但我现在不能解决。

感谢您的帮助。

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);

示例here。

d3.js在树形布局中链接分离

1 个答案: