JTopo踩坑记 – React项目中使用JTopo
JTopo-in-node & JTopo
最近实习公司一个项目需要绘制电网的拓扑图，大致要求的效果如下：
首先想到的是Echarts和d3，因为这个项目其他图表都是使用的Echarts， 但是在Echarts的官方示例以及 Gallery中并没有找到类似的示例，并且Echarts的自动布局大多为环形布局，不符合项目需求。所以只能寻找其他的node包。然后就找到了JTopo，但是在官网上只有js文件，之后在npm官网找到了node版本的JTopo。需要说明的是，目前所有es6版本的JTopo相关的包都是由JTopo爱好者贡献的。一开始我只关注了JTopo这一个包， 但是在实际的使用中我发现了很多问题，并且很多JTopo官网有的功能这个包没有实现，这也导致我最终放弃了这个包， 而选择了JTopo-in-node。npm安装指令:
npm i jtopo-in-node
JTopo
JTopo这个包只是封装了一些基本的功能，比如创建node和link，虽然作者说的api和JTopo官网的类似，但是还是有一些差别的，比如官网给一个scene添加node或者link使用scene.add(node)，但是在这个包中需要使用scene.name.add(node)。还有很多功能没有实现比如node的alarm以及tip只能在节点顶部绘制，无法显示link的名称；甚至还有一些错误，比如作者Github中给的vue写的示例，node的Tip显示会出错。在使用中我发现当canvas的大小超出了页面的高度，将页面滑动的时候会出现鼠标无法选择节点的情况，只有回到页面加载成功时的位置才能正常使用。
一开始我使用这个包进行开发，并且画出了大概的图
但是新的需求来了，需要平移和缩放以及查找节点。我发现没有继续使用这个包无法实现这个包。因为这个图上需要显示实时的数据，所以每一次有新的数据都会导致页面重绘，并且由于这个包没有提供自动布局，只能自己计算位置，所以新的需求没有办法实现，之后我就找到了jtopo-in-node。
jtopo-in-node
jtopo-in-node的api和JTopo官网几乎一样，可以参考官网的api教程，目前我只使用React实现了官网的一个实例：
代码：
import React, { PureComponent } from 'react'
import JTopo from 'jtopo-in-node';
import {Row, Col, Card} from 'antd';class DeviceGraph extends React.Component{state = {canvasWidth: '300',position: [],allSensors: []};componentDidMount() {var canvas = this.refs.test;canvas.width = window.innerWidth * 0.95;this.setState({canvasWidth: window.innerWidth * 0.95});}node = (scene, x, y, img) => {var node = new JTopo.Node();node.setImage('http://www.jtopo.com/demo/img/statistics/' + img, true);node.setLocation(x, y);node.dragable = false;node.fontColor = '0,0,0';scene.add(node);return node;};linkNode = (scene,nodeA, nodeZ, f) => {var link;if(f){link = new JTopo.FoldLink(nodeA, nodeZ, "test");}else{link = new JTopo.Link(nodeA, nodeZ);}link.direction = 'vertical';scene.add(link);return link;};hostLink = (scene, nodeA, nodeZ) => {var link = new JTopo.FlexionalLink(nodeA, nodeZ);link.shadow = false;link.offsetGap = 44;scene.add(link);return link;};render(){console.log('JTopo', JTopo);// canvas元素存在之后再进行操作if(this.refs.test){var stage = new JTopo.Stage(this.refs.test);stage.eagleEye.visible = null;stage.wheelZoom = 0.95;var scene = new JTopo.Scene(stage);scene.background = 'http://www.jtopo.com/demo/img/bg.jpg';var s1 = this.node(scene,305, 43, 'server.png');s1.alarm = '2 W';var s2 = this.node(scene,365, 43, 'server.png');var s3 = this.node(scene,425, 43, 'server.png');var g1 = this.node(scene,366, 125, 'gather.png');this.linkNode(scene,s1, g1, true);this.linkNode(scene,s2, g1, true);this.linkNode(scene,s3, g1, true);var w1 = this.node(scene,324, 167, 'wanjet.png');this.linkNode(scene,g1, w1);var c1 = this.node(scene,364, 214, 'center.png');this.linkNode(scene,w1, c1);var cloud = this.node(scene,344, 259, 'cloud.png');this.linkNode(scene,c1, cloud);var c2 = this.node(scene,364, 328, 'center.png');this.linkNode(scene,cloud, c2);var w2 = this.node(scene,324, 377, 'wanjet.png');this.linkNode(scene,c2, w2);var g2 = this.node(scene,366, 411, 'gather.png');this.linkNode(scene,w2, g2);var h1 = this.node(scene,218, 520, 'host.png');h1.alarm = '';this.hostLink(scene,g2, h1);var h2 = this.node(scene,292, 520, 'host.png');this.hostLink(scene,g2, h2);var h3 = this.node(scene,366, 520, 'host.png');h3.alarm = '二级告警';h3.text = 'h3';this.hostLink(scene,g2, h3);var h4 = this.node(scene,447, 520, 'host.png');this.hostLink(scene,g2, h4);var h5 = this.node(scene,515, 520, 'host.png');h5.alarm = '1M';this.hostLink(scene,g2, h5);stage.setCenter(515, 520)setInterval(function(){if(h3.alarm == '二级告警'){h3.alarm = null;h3.text = 'h3'+ Math.random()}else{h3.alarm = '二级告警'}}, 600);}return(<Row><Col className="gutter-row" xs={24} sm={24} md={24} lg={24} xl={24} ><Card style={{textAlign: "center" ,width:"100%", height: '650px', marginBottom: '20px'}}><canvas ref="test" width= {'300px'} height={'600px'} /></Card></Col></Row>)}}export default DeviceGraph;没有安装antd的同学可以使用将render中的return换成
<div><canvas ref="test" width= {'300px'} height={'600px'} />
</div>
在控制台输出JTopo可以看到几乎实现了JTopo官网的所有功能：
目前还没有用到项目当中，等到使用了之后再总结一下使用经验。
最后感谢JTopo原作者以及编写es6版本的爱好者，欢迎大家加入JTopo交流群：171820448 。
