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

来源：互联网发布：加工中心g76镗孔编程编辑：程序博客网时间：2024/06/05 19:43

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

全部的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();
}
}

0 0

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

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