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

d3.js link seperation in tree layout

本文关键字：js 链接 分离 d3 布局      更新时间：2023-09-26

我想做的是在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]; });

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

谢谢你的帮助。

要移动文本，不要在投影中移动，而是在转换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);

此处为示例。

相关文章：