D3 树图曲线起始位置

Question

总结

使用下面的示例，我创建了一个数据库驱动的树视图，其中包含信息块而不是圆形节点。

Interactive d3.js tree diagram

请看下面的示例截图：

这个想法是让行从块结束的地方开始。我认为这与以下功能有关：

// Custom projection
var linkProjection = d3.svg.diagonal()
   .source(function (d) {
       return { "y": d.source.y, "x": d.source.x };
   })
   .target(function (d) {
       return { "y": d.target.y, "x": d.target.x };
   })
   .projection(function (d) {
       return [d.y, d.x];
   });

// Enter any new links at the parent's previous position.
link.enter().insert("path", "g")
   .attr("class", "link")
   .style("fill", "none")
   .style("stroke", "#d1d6da")
   .style("stroke-width", "1")
   .attr("d", function (d) {
       var s = { x: source.x0, y: source.y0 };
       var t = { x: source.x0, y: source.y0 };
       return linkProjection({ source: s, target: t });
});

我尝试将块宽度添加到 y 坐标，但尽管它从正确的位置开始绘制，但它再次在块的开头结束。

有什么建议吗？

Answer 1

没有更多代码很难说，但我认为这与坐标系有关。 x,y 指向我认为的对象的中心。因此，您必须将 y 向右平移框长度的一半。

即父级之前的位置 (x,y) 指向父级的中心。