树形图中的链接方向方向不正确

Question

从树形图示例here 开始，我想更改链接，以便每个链接的源位置和目标位置可以相对于它们的公共交汇点进行更改。我目前的进度点是here（这些例子是为了证明问题，但我相信它已经足够了）。

这似乎可以使用source 和target 评估函数来实现。因此，我编辑了 diagonal 变量的原始代码；

var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.y, d.x]; });

到;

var diagonal = d3.svg.diagonal()
    .source(function(d) { return {x: d.source.y , y: d.source.x}; })
    .target(function(d) { return {x: d.target.y , y: d.target.x}; });

对于这些位置来说效果很好，但链接认为它们仍然是垂直的，因此看起来像这样；

而不是这个；

我尝试在对角变量声明中更改 x / y 值的方向，这只能成功地垂直定向树链接。

在输入链接时，我也尝试在一段稍微复杂的代码中执行相同的操作，但链接再次出现方向不正确。

我不禁认为我需要增加一名评估员来解释曲线的方向，但如果我能看到它，我就该死。

起始码here.

改编代码here。

非常感谢您的关注。

Answer 1

我可能在这里完全遗漏了一些东西。但是替换：

.projection(function(d) { return [d.y, d.x]; });

与：

.source(function(d) { return {x: d.source.y , y: d.source.x}; })
.target(function(d) { return {x: d.target.y , y: d.target.x}; });

几乎复制了 .projection 的功能，除了线的插值方式。相反，如果您按原样设置投影并正常定义源和目标的 x 和 y 坐标，则整个图表将从垂直对齐翻转为水平对齐：

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

给予：

这仍然使您可以访问源评估员和目标评估员，同时保持正确的对齐方式，我认为这是目标。

顺便说一下，喜欢你的 D3 网站，这是一个很好的资源。