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

桑基图节点过多会导致内存溢出、页面卡死 #7325

Closed
18366168836 opened this Issue Dec 20, 2017 · 3 comments

Comments

Projects
None yet
2 participants
@18366168836

18366168836 commented Dec 20, 2017

One-line summary [问题简述]

function computeNodeBreadths(nodes, nodeWidth, width) {
var remainNodes = nodes;
var nextNode = null;
var x = 0;
var kx = 0;

while (remainNodes.length) {
    nextNode = [];
    for (var i = 0, len = remainNodes.length; i < len; i++) {
        var node = remainNodes[i];
        node.setLayout({x: x}, true);
        node.setLayout({dx: nodeWidth}, true);
        for (var j = 0, lenj = node.outEdges.length; j < lenj; j++) {
  // 这个位置
            nextNode.push(node.outEdges[j].node2);
        }
    }
    remainNodes = nextNode;
    ++x;
}

moveSinksRight(nodes, x);
kx = (width - nodeWidth) / (x - 1);

scaleNodeBreadths(nodes, kx);

}

Version & Environment [版本及环境]

  • ECharts version [ECharts 版本]:3.7.2
  • Browser version [浏览器类型和版本]:chrome
  • OS Version [操作系统类型和版本]:mac osx

Expected behaviour [期望结果]

function computeNodeBreadths(nodes, nodeWidth, width) {
var remainNodes = nodes;
var nextNode = null;
var x = 0;
var kx = 0;
while (remainNodes.length) {
nextNode = [];
for (var i = 0, len = remainNodes.length; i < len; i++) {
var node = remainNodes[i];
node.setLayout({x: x}, true);
node.setLayout({dx: nodeWidth}, true);
for (var j = 0, lenj = node.outEdges.length; j < lenj; j++) {
var tmpNode = node.outEdges[j].node2;
// 我做了如下修改
if(nextNode.indexOf(tmpNode)==-1){
nextNode.push(node.outEdges[j].node2);
}
}
}
remainNodes = nextNode;
++x;
}
moveSinksRight(nodes, x);
kx = (width - nodeWidth) / (x - 1);

        scaleNodeBreadths(nodes, kx);
    }

ECharts option [ECharts配置项]

option = {
backgroundColor: '#122441',
            nodeWidth: '20px',
            lengend:{
                show:false
            },
            title: {
                show: false,
                text: 'Sankey Diagram'
            },
            tooltip: {
                trigger: 'item',
                triggerOn: 'mousemove',
                formatter:function(params){
                    if(params.data.value != 0){
                        return params.data.cname+':'+params.data.value;
                    }
                }
            },
            textStyle: {
                color: 'rgba(255, 255, 255, 0.7)'
            },
            grid: {
                left: '30px',
                right: '60px',
                bottom: '60px',
                show: false,
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: sjtVisitTime, 
                axisPointer: {
                    type: 'shadow'
                },
                splitLine: {
                    show: false
                },
                axisLabel: {
                    rotate: 20,
                    interval:0
                },
                axisLine: { 
                    lineStyle: {
                        color: '#226196',
                        width: 1,
                    }
                }
            }],
            yAxis: [{
                type: 'value',
                max:10,
                min:0,
                data:[10],
                axisLabel: {
                    show:false,
                    formatter: '{value}'
                },
                axisLine: { 
                    lineStyle: {
                        color: '#226196',
                        width: 1,
                    }
                },
                splitLine: {
                    show: false
                },
                axisTick:{
                    show:false
                }
            }],
            series: [{
                type: 'sankey',
                left: '65px',
                bottom: '95px',
                layout: 'none',
                right: '65px',
                data: nodes, 
                links: links,
                label: {
                    normal: {
                        formatter:function(params){
                            return params.data.value != 0 ? params.data.value : '';
                        },
                        color: '#fff'
                    }
                }
            }]
}

Other comments [其他信息]

@deqingli

This comment has been minimized.

Member

deqingli commented Apr 9, 2018

你好,页面卡死,应该是数据中存在环导致的

@deqingli

This comment has been minimized.

Member

deqingli commented Apr 11, 2018

你好,这个问题是由于原始输入数据中存在环导致的。sankey 图理论上只支持有向无环图(DAG, Directed Acyclic Graph),所以原先的布局算法是默认输入数据是有向无环的,当有环的时候就会陷入死循环,当然这主要是我前期开发的时候欠考虑导致的,我会好好反思的。修改后的布局算法是按拓扑顺序遍历计算布局的,如果判断有环就会报错,不会绘制。

@deqingli deqingli closed this Apr 11, 2018

@deqingli

This comment has been minimized.

Member

deqingli commented Apr 11, 2018

修改后的功能会随下个版本一起发布,欢迎大家验证,如果有问题可以 reopen 这个 issue. ~ 祝好

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