Link是一条连接from节点和to节点的路径, 大部分属性既可以在链路上设置, 也可以在GView上设置全局属性, 全局属性名由link_前缀加属性名组成, Link属性的优先级高于GView上的全局属性
Link的路径是根据from节点和to节点的位置, 以及Link的type类型计算出来的, 如果不设置或者没有正确设置Node时, 则Link不显示
多条Link的间距要通过GView的link_gap属性进行设置
设置了from和to节点的Link才能在GView组件中显示
new z.gv.Link(fromNode, toNode); //位置参数
new z.gv.Link({
from: fromNode, //属性参数
to: toNode
});
有如下可选项:
直角类型Link根据路径的走向, 分为如下类型
new z.gv.Link(fromNode, toNode, {
type: "cubic"
});
gView.set("link_type", "quadratic"); //全局设置
有如下可选项:
new z.gv.Link(fromNode, toNode, {
from_position: "edge_center",
to_position: "center"
});
gView.set("link_from_position", "edge_center"); //全局设置
gView.set("link_to_position", "center"); //全局设置
new z.gv.Link(fromNode, toNode, {
from_offset_x: 10,
to_offset_x: 20
});
gView.set("link_from_offset_x", 10); //全局设置
gView.set("link_to_offset_x", 20); //全局设置
new z.gv.Link(fromNode, toNode, {
from_offset_y: 10,
to_offset_y: 20
});
gView.set("link_from_offset_y", 10); //全局设置
gView.set("link_to_offset_y", 20); //全局设置
两个节点间的多条直线型Link默认显示成平行线, 可以通过corner_offset属性添加拐点效果, 变成一组从中间点出发的带有拐点的折线
new z.gv.Link(formNode, toNode, {
corner_offset: 10
});
gView.set("link_corner_offset", 20); //全局设置
仅对直线类型Link有效
new z.gv.Link(fromNode, toNode, {
corner_radius: 10
});
gView.set("link_corner_radius", 20); //全局设置
仅对直角类型Link有效
取值范围为0-1, 数字越大弯曲程度越大
new z.gv.Link(fromNode, toNode, {
curvature: 0.2
});
gView.set("link_curvature", 0.3); //全局设置
仅对二次贝塞尔曲线类型和三次贝塞尔曲线类型Link有效
画笔相关样式设置, 请参考画笔样式
link.set("stroke","LightSkyBlue"); //Name
link.set("stroke","#008080"); //HEX
link.set("stroke","rgb(105, 105, 105)"); //RGB
link.set("stroke","rgba(154, 205, 50, 0.8)"); //RGBA
gView.set("link_stroke", "#008080"); //全局设置
请注意除了color, 只有linear_gradient渐变类型对Link有效, radial_gradient和conic_gradient都无效
指定起始位置向结束位置的渐变色, 对应的GView全局属性是link_stroke_gradient_colors
请参考填充和画笔样式#stroke_gradient_colors
link.set("stroke_gradient_colors", {
"0": "#5470c6",
"0.33": "#5470c6",
"0.331": "#91cc75",
"0.66": "#91cc75",
"0.661": "#fac858",
"1": "#fac858"
});
gView.set("link_stroke_gradient_colors", { //全局设置
0: "black",
0.5: "red",
1: "white"
});
link.set("stroke_line_width", 2);
gView.set("link_stroke_line_width", 2); //全局设置
link.set("stroke_line_dash", [6, 3]);
gView.set("link_stroke_line_dash", [3, 2]); //全局设置
请参考填充和画笔样式#stroke_line_dash_offset
link.set("stroke_line_dash_offset", 10);
gView.set("link_stroke_line_dash_offset", 10); //全局设置
link.set("from_arrow_shape", "arrow");
link.set("to_arrow_shape", "stealth_arrow");
gView.set("link_from_arrow_shape", "open_arrow"); //全局设置
gView.set("link_to_arrow_shape", "open_arrow"); //全局设置
link.set("from_arrow_size", 3);
link.set("to_arrow_size", 6);
gView.set("link_from_arrow_size", 8); //全局设置
gView.set("link_to_arrow_size", 8); //全局设置
link.set("from_arrow_offset", 3);
link.set("to_arrow_offset", 0.5); //50%
gView.set("link_from_arrow_offset", 8); //全局设置
gView.set("link_to_arrow_offset", 0.2); //全局设置
link.set("from_arrow_fill", "LightSkyBlue"); //Name
link.set("from_arrow_fill", "#008080"); //HEX
link.set("to_arrow_fill", "rgb(105, 105, 105)"); //RGB
link.set("to_arrow_fill", "rgba(154, 205, 50, 0.8)"); //RGBA
gView.set("link_from_arrow_fill", "Green"); //全局设置
gView.set("link_to_arrow_fill", "Orange"); //全局设置
link.set("from_arrow_stroke", "LightSkyBlue"); //Name
link.set("to_arrow_stroke", "#008080"); //HEX
gView.set("link_from_arrow_stroke", "rgb(105, 105, 105)"); //全局设置
gView.set("link_to_arrow_stroke", "rgba(154, 205, 50, 0.8)"); //全局设置
请参考箭头样式#arrow-stroke-line-width
link.set("from_arrow_stroke_line_width", 2);
link.set("to_arrow_stroke_line_width", 3);
gView.set("link_from_arrow_stroke_line_width", 2); //全局设置
gView.set("link_to_arrow_stroke_line_width", 3); //全局设置
文本相关属性设置, 请参考文本样式