[GitHub] [incubator-echarts] zuiidea commented on issue #6811: 关系图graph支持两个data节点之间多条link，每个link代表一种关系，并可以筛选？

Thu, 13 Jun 2019 20:01:11 -0700 

zuiidea commented on issue #6811: 关系图graph支持两个data节点之间多条link，每个link代表一种关系，并可以筛选？
URL: 
https://github.com/apache/incubator-echarts/issues/6811#issuecomment-501949898
 
 
   - 使用 @HowToMeetYou 的方法可以解决问题，但是每次安装或者更新依赖后都需要手动更改源码，在持续集成环境中也不太好操作，这里附上一个重写 
addEdge 的方法，具体操作参加下面代码：
   
   ```
   import Graph from 'echarts/lib/data/Graph'
   import echarts from 'echarts'
   
   const Edge = Graph.Edge
   const Node = Graph.Node
   
   function generateNodeKey(id) {
     return '_EC_' + id;
   }
   
   Graph.prototype.addEdge = function (n1, n2, dataIndex) {
     var nodesMap = this._nodesMap;
     var edgesMap = this._edgesMap; // PNEDING
   
     if (typeof n1 === 'number') {
       n1 = this.nodes[n1];
     }
   
     if (typeof n2 === 'number') {
       n2 = this.nodes[n2];
     }
   
     if (!Node.isInstance(n1)) {
       n1 = nodesMap[generateNodeKey(n1)];
     }
   
     if (!Node.isInstance(n2)) {
       n2 = nodesMap[generateNodeKey(n2)];
     }
   
     if (!n1 || !n2) {
       return;
     }
   
     var key = n1.id + '-' + n2.id; // PENDING
   
     // if (edgesMap[key]) {
     //   return;
     // }
   
     var edge = new Edge(n1, n2, dataIndex);
     edge.hostGraph = this;
   
     if (this._directed) {
       n1.outEdges.push(edge);
       n2.inEdges.push(edge);
     }
   
     n1.edges.push(edge);
   
     if (n1 !== n2) {
       n2.edges.push(edge);
     }
   
     this.edges.push(edge);
     edgesMap[key] = edge;
     return edge;
   }
   
   ```
   
   - 此外，代码中曲度使用随机可能导致图形不是很好看，这里附上一个曲度优先生成的列表，使用方法如下：
   
   ```
   /**
    * 生成边曲度优先使用列表
    * @return  [0.2, -0.2, 0.4, -0.4, 0.6, -0.6, 0.8, -0.8, 1, -1, 0.1, -0.1, 
0.3, -0.3, 0.5, -0.5, 0.7, -0.7, 0.9, -0.9]
    */
   const CURVENESS_LIST = Array.from({ length: 20 })
   .map((_, i) => (((i < 10 ? i + 2 : i - 9) - (i % 2)) / 10) * (i % 2 ? -1 : 
1))
   
   // 1. 已存在的边的列表
   const data = []
   // 2. 预期生成的优化曲度后的列表
   const echartLinks = []
   
   data.forEach(link => {
       // 3. 查询已优化的列表中，已存在的两个顶点相同的边
       const sameLink = echartLinks.filter(
           item =>
           item.source === link.source &&
           item.target === link.target
       )
   
       // 4. 优化曲度
       link.lineStyle.normal.curveness = CURVENESS_LIST[sameLink.length] || 
Math.random()
   
       echartLinks.push(link)
   })
   ```
   
   
   
   优化前：`curveness: Math.random()`
   
![image](https://user-images.githubusercontent.com/16070518/59480003-87210100-8e91-11e9-9eb5-4e9221cf41e3.png)
   
   
   
   
   优化后：`curveness: CURVENESS_LIST[sameLink.length] || Math.random()`
   
![image](https://user-images.githubusercontent.com/16070518/59479972-6ce72300-8e91-11e9-9b80-800cef6606b4.png)
   

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
[email protected]


With regards,
Apache Git Services

---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]

Reply via email to