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

[18366168836]

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]

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

[deqingli]

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

[deqingli]

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