New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
terence1984 opened this Issue Aug 4, 2017 · 7 comments

Comments

Projects
None yet
5 participants
@terence1984

terence1984 commented Aug 4, 2017

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

This comment has been minimized.

CapDuan commented Oct 19, 2017

@terence1984
先上Demo的截图
default

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

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

@deqingli deqingli self-assigned this Mar 7, 2018

@deqingli deqingli self-assigned this Apr 12, 2018

@deqingli

This comment has been minimized.

Member

deqingli commented Apr 18, 2018

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

@CapDuan

This comment has been minimized.

CapDuan commented Apr 18, 2018

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

@deqingli

This comment has been minimized.

Member

deqingli commented Apr 18, 2018

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

祝好,
德清

@DoranYun

This comment has been minimized.

DoranYun commented Jun 13, 2018

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

@SuperAL

This comment has been minimized.

SuperAL commented Jul 16, 2018

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

@deqingli

This comment has been minimized.

Member

deqingli commented Oct 22, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment