从浏览器渲染原理层面解决echarts 力引导图鼠标一动就旋转的问题
问题
首先看力引导图取消动画效果后，还是旋转的问题：
由于图片整体涉及公司资料就不放全了，但是截图位置是一模一样的，，
当我鼠标点击或者移出之后，很明显点位就发生了旋转：
可以看到上方绿色的点很明显发生了偏移，这就会给使用者带来一种卡顿的感受
而我在代码里书写的逻辑是触发点击事件就会将页面进行再次渲染
myChart.on('click', function(params) {
....(中间事件代码就不放了，会改变点的属性)
myChart.setOption(option);（第二次渲染）
});
animation:false,
force: {
repulsion: 200, //相距距离
edgeLength: [50, 100],
layoutAnimation: false
},
myChart.setOption(option);（第一次渲染）
那么现在想要解决力引导图关闭动画属性后还旋转造成卡顿错觉问题，我们就必须从浏览器渲染原理说起，这样能更好帮助你理解为什么这样做。
浏览器渲染机制
我们可以将浏览器页面看做一棵树，而HTML页面内的<head> </head> <body> </body>里的元素可以看成是树的分叉枝。在浏览器进行页面渲染的时候，浏览器的渲染引擎会解析HTML代码，将HTML页面元素解析成一个个DOM节点。
这个DOM节点是什么意思呢？如果把HTML页面比喻为一棵树，那么HTML页面里的<head></head> <body></body> 往小了看，中间的<title></title> <script></script>都可以看做是这棵树的树枝节点。解析之后，HTML页面就类似于挂有DOM节点的树。不过此时得到的仅仅只是一颗只有枝干的DOM树，并且并没有显示在浏览器界面上，要想显示一棵枝叶繁茂，生机勃勃的树，少不了其他的点缀。可以把页面元素的样式作为树叶，在枝干树生成之后，会将页面的css生成树叶。
枝干和树叶合并在一起就成为一棵完整的树（这就叫做渲染树），不过这里还是并没有画面显示，我们只是拿到了这棵树，但是在哪里显示呢？以及这棵树的颜色是怎么样的？浏览器这时就会将这棵树的DOM节点进行定位与布局在画布上，然后启动渲染，对这棵树进行上色就会显示在网页上
原理与问题的联系
这样就很明显了，拿到图中点的json数据，进行第一次渲染之后，会在浏览器页面生成DOM树，生成渲染树，再进行渲染，就显示出力引导图。那么，在触发点击事件之后，修改了DOM节点的显示，再执行第二次页面渲染，这时浏览器就会发生重排。而在力引导图中节点的位置不是自定义写死的，而是由echarts算法自动生成的。在浏览器进行重排之后会重新计算节点位置，力引导图又是不断运动的每一时刻都在更新，一旦重排，位置与之第一次渲染的比较就可能发生改变。这就是为什么第二次渲染之后，力引导图就会发生动态旋转的原因。
解决方法
那么怎么解决这个问题呢？我在想既然是第二次渲染与第一次渲染产生的节点位置不同，那么能不能让第二次渲染也达到和第一次渲染的效果呢？于是我就想把第一次渲染的节点数据进行清除，这时浏览器就会回到第一次渲染之前的状态，第二次渲染对于浏览器而言又是一次新的初始渲染，直接达到力引导图的稳定态（力引导图动态效果会随机撒点，然后经过算法的不断迭代，最后达到一个稳定态不再变化，由于上面最开始我们已经关闭了动画效果，所以直接会达到稳定态）
myChart.on('click', function(params) {
myChart.clear();
....(中间事件代码)
myChart.setOption(option);
});
1905
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
