3

我对使用桑基图很感兴趣,例如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 专家知道这是否容易在位置计算算法中修改?

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

从:

原始行为

至:

期望的行为

4

2 回答 2

2

是的,可以通过对 Sankey 代码插件的简单更改来实现您想要的。

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

moveSinksRight(x);

应改为:

moveSourcesRight(x);

这在以下两个示例中进行了说明:

示例 1

(原 Sankey 插件)

jsfiddle

在此处输入图像描述

示例 2

(建议更改)

jsfiddle

在此处输入图像描述

示例 3

(同时使用MoveSinksRight()MoveSourcesRight()

jsfiddle

在此处输入图像描述

示例 4

(没有MoveSinksRight()MoveSourcesRight()

jsfiddle

在此处输入图像描述

于 2014-12-18T17:11:23.360 回答
0

这是我的方法:

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

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

于 2014-10-31T09:35:49.120 回答