Echart 桑基图内是否可以定义一个node显示的层级?

terence1984 commented 7 years ago

One-line summary [问题简述]

使用Echart的桑基图进行路径分析的可视化, 但是由于桑基图的规则，使每个路径的最后一页都显示在最后一个层级上，这样进行路径分析的可视化就不太匹配了。

sankey

Version & Environment [版本及环境]

ECharts version [ECharts 版本]:3.6.2
Browser version [浏览器类型和版本]:Firefox 43
OS Version [操作系统类型和版本]:Windows 7

Expected behaviour [期望结果]

可以指定每个node所在层级

ECharts option [ECharts配置项]


var data = {
    nodes:[{'name':'A'},{'name':'B'},{'name':'C'},{'name':'D'},{'name':'E'},{'name':'F'}],
    links:[{'source':'A','target':'B',value:0.5},{'source':'B','target':'C',value:0.5},{'source':'C','target':'D',value:0.5},{'source':'A','target':'E',value:0.5},{'source':'B','target':'F',value:0.5}]
}
option = {
        title: {
            text: 'Sankey Diagram'
        },
        tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'

        },
        series: [
            {
                type: 'sankey',
                layout:'none',
                data: data.nodes,
                links: data.links,
                itemStyle: {
                    normal: {
                        borderWidth: 1,
                        borderColor: '#aaa'
                    }
                },
                lineStyle: {
                    normal: {
                        curveness: 0.5
                    }
                }
            }
        ]
    }

Other comments [其他信息]

CapDuan commented 7 years ago

@terence1984 先上Demo的截图 default

不知道你是不是要的这种效果，这里我就是做的路径分析的一个Demo 实现效果需要明确两点。

桑基图（Sankey diagram），即桑基能量分流图，也叫桑基能量平衡图 能量平衡图，我理解是说开头和结束能量总和是相等的。可视化表现就是开始节点和结束节点的长度一致。
数据出现相同节点，用数字添加后缀或你自己想个方法区别Nodes中的元素，然后保证叶子节点（不够严谨，意会即可）都流向END节点，就可以实现上述层级展示。

deqingli commented 6 years ago

你好，sankey 在绘制的时候，为了减少节点之间的遮盖以及整个视图的美观，将没有出边的叶子节点都调整到最后一层。这样处理在某些数据场景的确不太合适，后续会调整一下布局，并增加一些配置项。

CapDuan commented 6 years ago

Sankey Diagram Generator, 这个问题这几天又在纠结，去年就因为这个问题echarts搞不定最后投靠D3解决的，参考的是这里，这里layer的概念好像就能很好的解决这个问题。

deqingli commented 6 years ago

谢谢建议，这个布局问题，我后续会慢慢调整优化的，争取提供全面灵活的方式。

祝好，德清

yundongbot commented 6 years ago

@deqingli 请问下这个有结论吗？

SuperAL commented 6 years ago

@deqingli 请问该功能有进展吗？最近刚好遇到相关的需求~

deqingli commented 6 years ago

@CapDuan @DoranYun @SuperAL 最近正在开发这个功能，预计下个版本会上

cttin commented 5 years ago

@deqingli 你好想问下这个需要设置什么么。为什么我升级到最新版本它还是每个路径的最后一个都显示在最后一个层级上。

visiky commented 5 years ago

请问这个功能什么时候会上呢？最近也遇到相应的需求 @deqingli 目前我是直接修改了sankeyLayout 源码来实现这个需求的

Harx commented 5 years ago

@CapDuan @DoranYun @SuperAL 最近正在开发这个功能，预计下个版本会上

问下有发布的时间预期吗？

deqingli commented 5 years ago

@All, I have accomplished this feature which will be released in 4.3.0.

Specify depth for each node

You can specify the depth of each node with the following way:

nodes: [{'name': 'A', 'depth': 0}, ......]

Here the depth works the same way as layer in Sankey Diagram Generator @CapDuan.

Specify the alignment of node

Also if you don't like all the leaves node is on the last depth, we provide the attribute nodeAlign in Sankey.series like the following:

series: [{
   //  which can 'justify' or 'right', the default value is 'justify'.
    nodeAlign: 'left'
}]

Which decide the alignment of the node.

shinchanZ commented 5 years ago

@ALL，我已经完成了这个将在4.3.0中发布的功能。

指定每个节点的深度

您可以使用depth以下方式指定每个节点：
节点： [{ ' name '： ' A '，' depth '： 0 }，...... ]
这里的depth工作方式相同layer的热平衡图发电机 @CapDuan。

指定节点的对齐方式

此外，如果您不喜欢所有叶节点都在最后一个深度，我们nodeAlign在Sankey.series中提供如下属性：
series ： [{
    //   可以'对齐'或'对'，默认值是'对齐'。
    nodeAlign ： ' left ' 
}]
这决定了节点的对齐方式。

什么时候发布啊，4.2里面的depth好像没任何作用

wayofwade commented 5 years ago

@ALL, I have accomplished this feature which will be released in 4.3.0.

Specify depth for each node

You can specify the depth of each node with the following way:
nodes: [{'name': 'A', 'depth': 0}, ......]
Here the depth works the same way as layer in Sankey Diagram Generator @CapDuan.

Specify the alignment of node

Also if you don't like all the leaves node is on the last depth, we provide the attribute nodeAlign in Sankey.series like the following:
series: [{
   //  which can 'justify' or 'right', the default value is 'justify'.
    nodeAlign: 'left'
}]
Which decide the alignment of the node.

4.2.1加了depth好像无效啊可以问下4.3版本什么时候发布嘛

erdos0828 commented 5 years ago

@ALL, I have accomplished this feature which will be released in 4.3.0.

Specify depth for each node

You can specify the depth of each node with the following way:
nodes: [{'name': 'A', 'depth': 0}, ......]
Here the depth works the same way as layer in Sankey Diagram Generator @CapDuan.

Specify the alignment of node

Also if you don't like all the leaves node is on the last depth, we provide the attribute nodeAlign in Sankey.series like the following:
series: [{
   //  which can 'justify' or 'right', the default value is 'justify'.
    nodeAlign: 'left'
}]
Which decide the alignment of the node.

麻烦问下4.3.0什么时候发布？

deqingli commented 5 years ago

Hi all, this feature released in version 4.4.0, I am so sorry about it. Please try it.

caowenyu commented 4 years ago

怎么解决点击最后一层节点时，之前的路径全高亮显示的问题的？

caowenyu commented 4 years ago

@terence1984 怎么解决点击最后一层节点时，之前的路径全高亮显示的问题的？

caowenyu commented 4 years ago

@deqingli 怎么解决点击最后一层节点时，之前的路径全高亮显示的问题的？

jeeseDear commented 4 years ago

@deqingli 怎么解决点击最后一层节点时，之前的路径全高亮显示的问题的？

怎么解决点击最后一层节点时，之前的路径全高亮显示的问题的这个问题你解决了吗

apache / echarts