请教！echarts关系边，在增加节点重新setOption后，指向乱掉。

Question

@Kener-林峰 你好，想跟你请教个问题：

 

使用echarts关系图时，想实现一个点击节点后，在当前节点分裂出更多节点的功能，但分裂出节点后，新的关系边并不会准确的指向新节点，而是乱掉，在缩放一次后即可正确指向节点。如图：

 

var nodeData = [{
            name: '徐贱云',
            draggable: true,
        }, {
            name: '冯可梁',
            category: 1,
            draggable: true,
        }, {
            name: '邓志荣',
            category: 1,
            draggable: true,
        }, {
            name: '李荣庆',
            category: 1,
            draggable: true,
        }, {
            name: '郑志勇',
            category: 1,
            draggable: true,
        }, {
            name: '赵英杰',
            category: 1,
            draggable: true,
        }, {
            name: '王承军',
            category: 1,
            draggable: true,
        }, {
            name: '陈卫东',
            category: 1,
            draggable: true,
        }, {
            name: '邹劲松',
            category: 1,
            draggable: true,
        }, {
            name: '赵成',
            category: 1,
            draggable: true,
        }, {
            name: '陈现忠',
            category: 1,
            draggable: true,
        }, {
            name: '陶泳',
            category: 1,
            draggable: true,
        }, {
            name: '王德福',
            category: 1,
            draggable: true,
        }]
var linkData = [{
            source: 0,
            target: 1,
            category: 0,
            value: '朋友'
        }, {
            source: 0,
            target: 2,
            value: '朋友'
        }, {
            source: 0,
            target: 3,
            value: '朋友'
        }, {
            source: 0,
            target: 4,
            value: '朋友'
        }, {
            source: 0,
            target: 5,
            value: '朋友'
        }, {
            source: 4,
            target: 5,
            value: '亲戚'
        }, {
            source: 2,
            target: 8,
            value: '战友'
        }, {
            source: 0,
            target: 12,
            value: '朋友'
        }, {
            source: 6,
            target: 11,
            value: '朋友'
        }, {
            source: 6,
            target: 3,
            value: '朋友'
        }, {
            source: 7,
            target: 5,
            value: '朋友'
        }, {
            source: 9,
            target: 10,
            value: '朋友'
        }, {
            source: 3,
            target: 10,
            value: '朋友'
        }]
option = {
    title: {
        text: 'Les Miserables',
        subtext: 'Default layout',
        top: 'top',
        left: 'right'
    },
    tooltip: {},
    animationDuration: 1500,
    animationEasingUpdate: 'quinticInOut',
    
    series: [{
        name: 'Les Miserables',
        type: 'graph',
        layout: 'force',
        data: nodeData,
        force:{
            layoutAnimation: false
        },
        links: linkData,
        roam: true,
        label: {
            normal: {
                position: 'right',
                formatter: '{b}'
            }
        },
        lineStyle: {
            normal: {
                curveness: 0.3
            }
        }
    }]
};
var a = 0;
var historyWord = [];
myChart.on('click',function (params) {
    for(i in historyWord){
        if(params.name == historyWord[i]){
            return false;
        }
    }
    if(params.dataType == 'edge'){return false}
    var word = params.name;
    var word1 = '关键词' + a++;
    var word2 = '关键词' + a++;
    var word3 = '关键词' + a++;
    nodeData.push({
        name:word1
    },{
        name:word2
    },{
        name:word3
    })
    linkData.push({
            source: word,
            target: word1
            
    },{
            source: word,
            target: word2
            
    },{
            source: word,
            target: word3
            
    })
    historyWord.push(params.name);
    myChart.setOption(option);
})

 

Answer 1

有两种方法可以解决：

一：在series.force.layoutAnimation设置成true.

二：series.animation设置成false

因为力引导布局会在多次迭代后才会稳定，layoutAnimation这个参数决定是否显示布局的迭代动画，在浏览器端节点数据较多（>100）的时候不建议关闭，布局过程会造成浏览器假死（此处造成错乱）。