Skip to content
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

Closed
terence1984 opened this issue Aug 4, 2017 · 19 comments
Closed

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

terence1984 opened this issue Aug 4, 2017 · 19 comments

Comments

@terence1984
Copy link

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
Copy link

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
Copy link
Member

deqingli commented Apr 18, 2018

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

@CapDuan
Copy link

CapDuan commented Apr 18, 2018

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

@deqingli
Copy link
Member

deqingli commented Apr 18, 2018

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

祝好,
德清

@DoranYun
Copy link

DoranYun commented Jun 13, 2018

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

@SuperAL
Copy link

SuperAL commented Jul 16, 2018

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

@deqingli
Copy link
Member

deqingli commented Oct 22, 2018

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

@cttin
Copy link

cttin commented Dec 5, 2018

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

@visiky
Copy link

visiky commented Jan 4, 2019

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

@Harx
Copy link

Harx commented Jan 7, 2019

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

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

@deqingli
Copy link
Member

deqingli commented Mar 12, 2019

@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
Copy link

shinchanZ commented Jul 11, 2019

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

指定每个节点的深度

您可以使用depth以下方式指定每个节点:

节点: [{ ' name ' ' A '' depth ' 0 }...... ]

这里的depth工作方式相同layer热平衡图发电机 @CapDuan

指定节点的对齐方式

此外,如果您不喜欢所有叶节点都在最后一个深度,我们nodeAlign在Sankey.series中提供如下属性:

series  [{
    //   可以'对齐'或'对',默认值是'对齐'。
    nodeAlign  ' left ' 
}]

这决定了节点的对齐方式。

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

@wayofwade
Copy link

wayofwade commented Aug 23, 2019

@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
Copy link

erdos0828 commented Aug 27, 2019

@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
Copy link
Member

deqingli commented Oct 29, 2019

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

@caowenyu
Copy link

caowenyu commented Jan 11, 2020

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

@caowenyu
Copy link

caowenyu commented Jan 11, 2020

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

@caowenyu
Copy link

caowenyu commented Jan 11, 2020

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

@jeeseDear
Copy link

jeeseDear commented May 6, 2020

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

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

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

No branches or pull requests