如何从json文件中分配Sankey图(D3)中节点的x轴位置

时间:2022-09-24 23:13:42

I finally found a Sankey Diagram in D3 that allows movement of the nodes across the x-axis, but I would like to assign a value from the json file to fix the position in particular places.

我终于在D3中找到了一个允许节点在x轴上移动的Sankey图,但是我想从json文件中分配一个值来修复特定位置的位置。

http://bl.ocks.org/d3noob/raw/5028304/

What I am trying to do is use the Sankey Diagram as a timeline.

我想要做的是使用Sankey Diagram作为时间表。

1 个解决方案

#1


1  

Let us call the x-coordinate layer. layer=0 will be left edge, and layer=n will be the right edge. In your JSON file, in the nodes field, add the key-value pair "layer": your_desired_x_as_integer for each node.

我们称之为x坐标层。 layer = 0将保留边缘,layer = n将是右边缘。在JSON文件的nodes节点中,为每个节点添加键值对“layer”:your_desired_x_as_integer。

Then go the sankey.js file and find the function componentsByBreadth.forEach. Replace the line node.x = component.x + node.x; with:

然后转到sankey.js文件并找到函数componentsByBreadth.forEach。替换行node.x = component.x + node.x;有:

if (node.layer) node.x=node.layer;
else node.x = component.x + node.x;

You can defined density of layers like this also, e.g. nodes placed on layers 0,1,2 or 0,4,8 will have a central node and two on the edges of the width of the sankey, but 0,1,5 will not have.

您也可以像这样定义图层密度,例如:放置在层0,1,2或0,4,8上的节点将具有一个中心节点,并且两个位于sankey宽度的边缘,但0,1,5将不具有。

If you need more help, this feature, among many other is included in my D3 Sankey app: http://sankey.csaladen.es

如果您需要更多帮助,我的D3 Sankey应用程序中包含此功能以及其他许多功能:http://sankey.csaladen.es

#1


1  

Let us call the x-coordinate layer. layer=0 will be left edge, and layer=n will be the right edge. In your JSON file, in the nodes field, add the key-value pair "layer": your_desired_x_as_integer for each node.

我们称之为x坐标层。 layer = 0将保留边缘,layer = n将是右边缘。在JSON文件的nodes节点中,为每个节点添加键值对“layer”:your_desired_x_as_integer。

Then go the sankey.js file and find the function componentsByBreadth.forEach. Replace the line node.x = component.x + node.x; with:

然后转到sankey.js文件并找到函数componentsByBreadth.forEach。替换行node.x = component.x + node.x;有:

if (node.layer) node.x=node.layer;
else node.x = component.x + node.x;

You can defined density of layers like this also, e.g. nodes placed on layers 0,1,2 or 0,4,8 will have a central node and two on the edges of the width of the sankey, but 0,1,5 will not have.

您也可以像这样定义图层密度,例如:放置在层0,1,2或0,4,8上的节点将具有一个中心节点,并且两个位于sankey宽度的边缘,但0,1,5将不具有。

If you need more help, this feature, among many other is included in my D3 Sankey app: http://sankey.csaladen.es

如果您需要更多帮助,我的D3 Sankey应用程序中包含此功能以及其他许多功能:http://sankey.csaladen.es