在桑基图中：使路径“尽可能短”？

Question

我对使用桑基图很感兴趣，比如http://bost.ocks.org/mike/sankey/

具体来说，我正在使用启用循环的块：http://bl.ocks.org/cfergus/3956043

但是，每个“开始节点”都绘制在最左边，每个“结束节点”都绘制在最右边。 Ascii 示例：

|A ----> B ----> C ----> D|
|E-------------> C        | <-- starts far left
|F --------------------> D| <-- starts far left
|G ----> B ------------> H| <-- finishes far right

我更喜欢（在我的具体情况下）是使路径尽可能短，例如：

|A ----> B ----> C ----> D|
|        E-----> C        |  <-- don't start far left
|                F ----> D|  <-- don't start far left
|G ----> B ----> H        |  <-- don't finish far right

任何d3js专家知道这是否容易在位置计算算法中修改？

目前我在渲染节点后手动移动它们。

来自：

到：

Answer 1

是的，只要对 Sankey 代码插件进行简单的更改，就可以实现您想要的。

Sankey 插件中的函数computeNodeBreadths() 中有一行：

moveSinksRight(x);

应该改为：

moveSourcesRight(x);

以下两个例子说明了这一点：

示例 1

（原 Sankey 插件）

jsfiddle

示例 2

（建议更改）

jsfiddle

示例 3

（MoveSinksRight() 和 MoveSourcesRight()）

jsfiddle

示例 4

（没有MoveSinksRight() 和MoveSourcesRight()）

jsfiddle

Answer 2

这是我的方法：

http://bl.ocks.org/danharr/af796d91926d254dfe99

我正在使用 graph.links[3].source.x = 200 等明确设置 x 坐标。我猜这可以链接到数据集而不是硬编码