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

桑基图显示排序问题 #4880

Closed
kingreatwill opened this Issue Jan 6, 2017 · 8 comments

Comments

Projects
None yet
6 participants
@kingreatwill

kingreatwill commented Jan 6, 2017

One-line summary [问题简述]

桑基图的target 如何排序?默认好想是按照value排序的

Other comments [其他信息]

image

@kingreatwill

This comment has been minimized.

kingreatwill commented Jan 6, 2017

我如何让 最右侧的 四个按照固定的上下顺序排序?

@kingreatwill

This comment has been minimized.

kingreatwill commented Jan 6, 2017

series: [
{
type: 'sankey',
layout:'none',
data: [
{ name: "All", value: 7 },
{ name: "a2", value: 5 },
{ name: "a1", value: 2 },
{ name: "b1", value: 4 },
{ name: "b2", value: 1 },
{ name: "c1", value: 3 },
{ name: "c2", value: 1 }
],
links:[
{ source: "All", target: "a1", value: 2 },
{ source: "All", target: "a2", value: 5 },

            { source: "a2", target: "b1", value: 4 },
            { source: "a2", target: "b2", value: 1 },

            { source: "b1", target: "c1", value: 3},
            
            { source: "b1", target: "c2", value: 1}
        ],
            itemStyle: {
                normal: {
                    borderWidth: 1,
                    borderColor: '#aaa'
                }
            },
            lineStyle: {
                normal: {
                    curveness: 0.5
                }
            }
        }
    ]
@kingreatwill

This comment has been minimized.

kingreatwill commented Jan 6, 2017

image
如何把a1放到最下面??

@100pah 100pah added the enhancement label Jan 7, 2017

@Ovilia Ovilia self-assigned this Mar 17, 2017

@Ovilia Ovilia assigned deqingli and unassigned Ovilia Sep 26, 2017

@Erimus-Koo

This comment has been minimized.

Erimus-Koo commented Mar 5, 2018

一种解决方案

刚才碰到了类似的问题,通过修改js凑合能用,分享一下。

修改echarts.js中的两个位置,我不确定是否两个都必要,但也懒得测试了。反正我改了之后成功了。注意是在完整版js里修改,比较好找。

  1. 寻找函数 computeNodeDepths 在其中 iterations 调用前强制设置为0,大约是52086行左右。
    initializeNodeDepth(nodes, nodesByBreadth, edges, height, nodeGap);
    resolveCollisions(nodesByBreadth, nodeGap, height);
    iterations = 0 //erimus
    for (var alpha = 1; iterations > 0; iterations--) {
        // 0.99 is a experience parameter, ensure that each iterations of
        // changes as small as possible.
  1. 寻找函数 sankeyVisual 注释掉其中的排序部分,大约52302行左右。
    ecModel.eachSeriesByType('sankey', function (seriesModel) {
        var graph = seriesModel.getGraph();
        var nodes = graph.nodes;
        //erimus
        // nodes.sort(function (a, b) {
        //     return a.getLayout().value - b.getLayout().value;
        // });
  1. 两部分都设置好之后,视图就按照 dada 的列表顺序排列了(links随意)。
    左侧集数,右侧时间线,都按照顺序排列了。
    image

  • 如果只下sankey的js,压缩之后220k,还行。
  • 其实我也搞不懂它怎么实现的,反正刚好就能用了。
  • 这样处理过之后颜色会有点问题,我是手动指定了data的itemlinks的line的颜色。
  • 排序其实还是挺有必要的,而且我还想要获取item位置大小,对item再增加类似graph的连线,修改item宽度等功能,都还没找到解决方法。等官方更新吧。
@ShawshankLin

This comment has been minimized.

ShawshankLin commented Mar 28, 2018

大佬分享一下呢

@deqingli deqingli self-assigned this Apr 12, 2018

@deqingli

This comment has been minimized.

Member

deqingli commented Apr 18, 2018

大家好,这个问题已经解决了,会在下个版本随版发布。修改后的节点是按用户给定的 series.data 中的顺序排序的,并且不会改变。谢谢大家的建议。

@deqingli deqingli closed this Apr 18, 2018

@deqingli

This comment has been minimized.

Member

deqingli commented Apr 18, 2018

大家试用后,如有任何问题,欢迎 reopen 这个 issue.

@kingreatwill

This comment has been minimized.

kingreatwill commented Apr 18, 2018

好的,谢谢!

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