javascript - 在Sankey图中:将路径设为 “as short as possible”？

我对使用Sankey图(例如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专家知道这在位置计算算法中是否易于修改？

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

从:

至:

最佳答案

是的，只需更改Sankey代码插件即可实现您想要的。

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

moveSinksRight(x);

它应该更改为:

moveSourcesRight(x);

下面的两个示例对此进行了说明:

例子1

(原始的Sankey插件)

jsfiddle

例子2

(建议更改)

jsfiddle

例子3

(同时使用MoveSinksRight()和MoveSourcesRight())

jsfiddle

例子4

(没有MoveSinksRight()和MoveSourcesRight())

jsfiddle