力导向图定义连线点击事件/样式/标注文字及源代码。

今天这篇，主要介绍定义连线点击事件/样式/标注文字及源代码。

全部的demo代码下载：http://pan.baidu.com/s/1jGzEb6u。

预览界面：http://www.suchso.com/code/KFdemo/force.html

使用_buildLinkShapes(nodes, links)函数，针对定义的全部线段数据，设置线段的权重（粗细）、样式和高亮样式。

1、zrender定义线段数据：

 
      var  
      shape = { 
     
      id : zr.newShapeId(self.type), 
     
      shape :  
      'line' 
      , 
     
      hoverable :  
      false 
      , 
     
      style : { 
     
      xStart : 0, 
     
      yStart : 0, 
     
      xEnd : 0, 
     
      yEnd : 0 
     
      }, 
     
      clickable :  
      true 
      , 
     
      highlightStyle : {} 
     
      };

clickable : true则是支持点击。

2、将link对象的点击事件，赋值给shape：

1

2

3

4

5

 
      if  
      ( 
      typeof  
      (link.onclick) !==  
      'undefined' 
      ) { 
     
      if  
      (link.onclick) { 
     
      shape.onclick = link.onclick; 
     
      } 
     
      }

我们在定义echarts事件的时候，是通过这么一个流程来的：

应用层echarts的js--->echarts事件--->echarts传递事件给zrender处理。

3、调用方法：下面是一个links数据的一个数据demo

 
      {source : 1, target : 0, weight : 1, 
     
      onclick: 
      function 
      (params){ 
     
      alert(params.target.style.text); 
     
      }, 
     
      itemStyle:{ 
     
      normal:{ 
     
      lineWidth:10, 
     
      text: 
      '丽萨-乔布斯' 
      , 
     
      textColor: 
      '#030303' 
      , 
     
      textFont: 
      'bold 15px verdana' 
      , 
     
      textPosition: 
      'inside' 
     
      } 
     
      }}

onclick是点击事件。onclick:function(params){alert(params.target.shape);

lineWidth是线段宽度。

text是标注的文字。

textPosition 采用的zrender中的文字位置。

定义线段事件和样式全部代码：

 
      function  
      _buildLinkShapes(nodes, links) { 
     
      var  
      l = links.length; 
     
      for  
      ( 
      var  
      i = 0; i < l; i++) { 
     
      var  
      link = links[i]; 
     
      //var source = nodes[link.source]; 
     
      // var target = nodes[link.target]; 
     
      var  
      weight = link.weight || 1; 
     
      linkWeights.push(weight); 
     
      var  
      shape = { 
     
      id : zr.newShapeId(self.type), 
     
      shape :  
      'line' 
      , 
     
      hoverable :  
      false 
      , 
     
      style : { 
     
      xStart : 0, 
     
      yStart : 0, 
     
      xEnd : 0, 
     
      yEnd : 0 
     
      }, 
     
      clickable :  
      true 
      , 
     
      highlightStyle : {} 
     
      }; 
     
      zrUtil.merge(shape.style, linkStyle); 
     
      zrUtil.merge(shape.highlightStyle, linkEmphasisStyle); 
     
      //优先级 ItemStyle > linkStyle  
     
      if  
      ( 
      typeof 
      (link.itemStyle) !==  
      'undefined' 
      ) { 
     
      if 
      (link.itemStyle.normal){ 
     
      zrUtil.merge(shape.style, link.itemStyle.normal, { 
     
      overwrite :  
      true 
     
      }); 
     
      } 
     
      if 
      (link.itemStyle.emphasis){ 
     
      zrUtil.merge( 
     
      shape.highlightStyle,  
     
      link.itemStyle.emphasis,  
     
      { overwrite :  
      true  
      } 
     
      ); 
     
      } 
     
      } 
     
      //zhao 
     
      if  
      ( 
      typeof  
      (link.onclick) !==  
      'undefined' 
      ) { 
     
      if  
      (link.onclick) { 
     
      shape.onclick = link.onclick; 
     
      } 
     
      } 
     
      linkShapes.push(shape); 
     
      self.shapeList.push(shape); 
     
      zr.addShape(shape); 
     
      } 
     
      var  
      narr =  
      new  
      NDArray(linkWeights); 
     
      var  
      max = narr.max(); 
     
      if  
      (max !== 0) { 
     
      linkWeights = narr.mul(1/max, narr).toArray(); 
     
      } 
     
      }