使用d3.js添加指向我的节点的链接

我正在testinf

d3.js

中尝试在根节点（JsFiddle中的中心节点）和子节点之间添加链接。我怎样才能简单地做到这一点

以下是我目前掌握的代码：

编辑

此代码已取得进展

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

var svgLinks = svgGroup.selectAll('path')
        .data(tree.links(nodes))
        .enter().append('svg:path')
        .attr('class', 'link')
        .attr('d', diagonal)
        .attr("fill", "none")
        .attr("stroke", "gray");

小提琴更新：

---

我现在唯一需要的是直线而不是曲线。有人吗？

计算并创建节点后，必须将链接创建为svg行元素：

var link = svgGroup.selectAll('line.link')
    .data(links)
    .enter().append('svg:line')
        .attr("class", "link")
        .attr("style","stroke:black")
        .attr("x1", function(d) { return ... (x coordinate source node) })
        .attr("y1", function(d) { return ... (y coordinate source node) })
        .attr("x2", function(d) { return ... (x coordinate target node) })
        .attr("y2", function(d) { return ... (y coordinate target node) });

---

你只需要找到一个很好的公式，从x，y极坐标计算位置。

两个有效的解决方案是：

使用路径（最简单的路径，但无法将曲线转换为直线）：

使用线条。诀窍是不能直接使用线来代替path（），如果您转换节点，它就不起作用

我找到的解决方案是：如果节点被转换，那么线也必须被转换：

在

y1

和

y2

上使用

d.target.x/180*Math.PI）

，因为我需要一个径向投影，最后使用以下方法再次变换线：

svgLinks.attr("transform", function (d) {
        return "rotate(" + (d.target.x - 90) + ")";
});

完整的工作示例如下：

---

创建“节点”，然后创建以节点为类的元素。您必须对“链接”执行同样的操作：使用源和目标的坐标创建svg:line元素。感谢@Matthieu，我知道这一点并理解其一般原理，但我对d3 js不够熟悉，无法编写实际代码并使其工作（我已经尝试了几个示例）；也许您可以直接使用强制布局：或者查看d3js svg行函数，我可以，但不会；-）。我希望从我的代码中学习。你知道如何检索源/目标坐标吗？它们存储在d.source（.x/y）和d.target（.x/y）中，实际上它不是数据（节点），而是数据（链接）。并且这些线没有使用正确的坐标绘制（请参见）。我认为这是因为——如果你阅读我的代码——节点被转换了。所以它们的x/y位置仍然是它们原来的位置，但变换给了它们另一个位置。你觉得呢？是的，我的错：是数据（链接）。你必须变换链接的位置，就像你对节点所做的那样（旋转在x上，距离在y上），这不是真的起作用，也不是我想要的，但它为我指明了正确的方向。

svgLinks.attr("transform", function (d) {
        return "rotate(" + (d.target.x - 90) + ")";
});