React中使用jtop（二）

在上一篇博客中提到了使用jtopo-in-node在React项目中使用jtopo，并画出了一个官网给出的demo。在这之后根据项目需求使用jtopo-in-node实现了拓扑图，在这个过程中遇到了一些问题，现在记录一下解决方案以及未解决的问题。

1. 关于node定位的问题，由于不了解jtopo的自动布局，所以我选择了自己计算node的位置。
2. 数据更新组件重新渲染的时候画布闪烁的问题。根据需求，需要在图中显示实时数据，但是数据更新会导致重新渲染，这时页面就会抖动。搜索解决方案无果，自己也尝试了很多方法但是都没有作用。之后在群里问了这个问题，很快就有小伙伴给出了解决方案：每一次重新渲染的时候就将原来的canvas元素移除，并创建一个新的canvas元素。js代码:

		var canvasParent = document.getElementById('canvasParent');
     	var oldCanvas =document.getElementById('canvas');
        oldCanvas.parentNode.removeChild(oldCanvas);
        var newCanvas = document.createElement('canvas');
        newCanvas.setAttribute('id', 'canvas');
        newCanvas.width = width;
        newCanvas.height = (height -100) > 500 ? (height - 100) : 500;
        canvasParent.appendChild(newCanvas);

render的return代码：

	  <div id='canvasParent'>
        <canvas id='canvas' width='300' height='600' />
      </div>

3. scale和translate的恢复。项目要求每一次获取数据导致组件更新之后还要能恢复原来的缩放比例和平移，保证和更新之前的图差不多。拓扑图的缩放可以同通过设置stage的scaleX和scaleY属性进行缩放。但是在设置translateX和translateY属性的时候发现有bug，如果移动之后拓扑图的一部分不在canvas边界之内缩放就会有问题。这个问题现在还没有解决。
4. 项目最终实现的效果图：
5. 最后，最近偶然在Echarts Gallery中发现使用Echarts实现的网络拓扑图，效果还不错，有要绘制拓扑图还没入jtopo坑的可以考虑使用Echarts去实现。地址：Echarts实现网络拓扑图