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

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网站，它是一个很好的资源。