Question

抱歉我的英语不好...... 我在这里使用示例：http://bl.ocks.org/mbostock/4339083 建立一个树形图，但我用rect更改了root的子项中的圆圈。现在图表有点乱，因为我看到链接通过rect。我希望这些链接开始和停止到rect的两侧。我想我必须修改对角线路径生成器中的代码：

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

但我无法弄清楚如何。我看到diagonal.source([source])和。{ API参考中的diagonal.target([target])方法。也许他们可以帮助我，但我不明白如何使用它。有人能帮助我吗？

Answer 1

您需要做的就是将路径的起点和终点偏移矩形的宽度。您需要修改的是：

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

d3.js：修改树形布局中的链接

1 个答案: