前言
在上篇文章中介绍了不同的节点之间的关系通过了最短路径和全部路径来寻找他们之间的关系网，并且在示例上是以连线的颜色变化做一个区别的展示。但是有些时候需求会要求显示路径的方式不是改变颜色，而是通过改变连线的样式，特别是修改箭头的样式做一个区分的展示，本篇文章来说明一下连线的不同的箭头样式。
基础数据
在数据方面我们依然选择使用路径时候的数据作为基础数据。
nodes: [
{ key: "1", color: "#99FFFF", text: "三国", figure: "Rectangle" },
{ key: "1-1", color: "#FF0000", text: "魏", figure: "Circle" },
{ key: "1-1-1", color: "#FF0000", text: "曹操", figure: "Circle" },
{ key: "1-1-2", color: "#FF0000", text: "荀彧", figure: "Circle" },
{ key: "1-1-3", color: "#FF0000", text: "许褚", figure: "Circle" },
{ key: "1-2", color: "#FFFF66", text: "蜀", figure: "Circle" },
{ key: "1-2-1", color: "#FFFF66", text: "刘备", figure: "Circle" },
{ key: "1-2-2", color: "#FFFF66", text: "诸葛亮", figure: "Circle" },
{ key: "1-2-3", color: "#FFFF66", text: "关羽", figure: "Circle" },
{ key: "1-3", color: "#0000FF", text: "吴", figure: "Circle" },
{ key: "1-3-1", color: "#0000FF", text: "孙权", figure: "Circle" },
{ key: "1-3-2", color: "#0000FF", text: "周瑜", figure: "Circle" },
{ key: "1-3-3", color: "#0000FF", text: "鲁肃", figure: "Circle" },
],
links: [
{
from: "1",
to: "1-1",
},
{
from: "1-1",
to: "1-1-1",
},
{
from: "1-1",
to: "1-1-2",
},
{
from: "1-1",
to: "1-1-3",
},
{
from: "1",
to: "1-2",
},
{
from: "1-2",
to: "1-2-1",
},
{
from: "1-2",
to: "1-2-2",
},
{
from: "1-2",
to: "1-2-3",
},
{
from: "1",
to: "1-3",
},
{
from: "1-3",
to: "1-3-1",
},
{
from: "1-3",
to: "1-3-2",
},
{
from: "1-3",
to: "1-3-3",
},
{
from: "1-1-2",
to: "1-2-2",
{
from: "1-2-2",
to: "1-3-2",
},
],
this.myDiagram.nodeTemplate = $$(
go.Node,
"Vertical",
$$(
go.Shape,
"Circle",
{ width: 30, height: 30, name: "ICON" },
new go.Binding("fill", "color"),
new go.Binding("figure", "figure")
),
$$(go.TextBlock, new go.Binding("text", "text"))
);
连线的箭头样式一
如果需要修改连线的箭头样式，则需要修改linkTemplate的模板，然后再links数据里面修改一下箭头的样式。示例代码如下
links: [
{
from: "1",
to: "1-1",
fromArrow:"Standard",
toArrow:"Backward"
},
{
from: "1-1",
to: "1-1-1",
fromArrow:"Triangle",
toArrow:"BackwardTriangle"
},
{
from: "1-1",
to: "1-1-2",
fromArrow:"Boomerang",
toArrow:"BackwardBoomerang"
},
{
from: "1-1",
to: "1-1-3",
fromArrow:"SidewaysV",
toArrow:"BackwardV"
},
{
from: "1",
to: "1-2",
fromArrow:"OpenTriangle",
toArrow:"BackwardOpenTriangle"
},
{
from: "1-2",
to: "1-2-1",
fromArrow:"OpenTriangleLine",
toArrow:"BackwardOpenTriangleLine"
},
{
from: "1-2",
to: "1-2-2",
fromArrow:"OpenTriangleTop",
toArrow:"BackwardOpenTriangleTop"
},
{
from: "1-2",
to: "1-2-3",
fromArrow:"OpenTriangleBottom",
toArrow:"BackwardOpenTriangleBottom"
},
{
from: "1",
to: "1-3",
fromArrow:"HalfTriangleTop",
toArrow:"BackwardHalfTriangleTop"
},
{
from: "1-3",
to: "1-3-1",
fromArrow:"HalfTriangleBottom",
toArrow:"BackwardHalfTriangleBottom"
},
{
from: "1-3",
to: "1-3-2",
fromArrow:"ForwardSemiCircle",
toArrow:"BackwardSemiCircle"
},
{
from: "1-3",
to: "1-3-3",
fromArrow:"Feather",
toArrow:"BackwardFeather"
},
{
from: "1-1-2",
to: "1-2-2",
fromArrow:"DoubleFeathers",
toArrow:"BackwardDoubleFeathers"
},
{
from: "1-2-2",
to: "1-3-2",
fromArrow:"TripleFeathers",
toArrow:"BackwardTripleFeathers"
},
],
this.myDiagram.linkTemplate = $$(
go.Link,
$$(
go.Shape,
{ strokeWidth: 3, stroke: "#2A659F" },
),
$$(go.Shape,
new go.Binding("fromArrow", "fromArrow"),
{ scale: 2, fill: "#D4B52C" }),
$$(go.Shape,
new go.Binding("toArrow", "toArrow"),
{ scale: 2, fill: "#D4B52C" }),
);
可以看出在修改
linkTemplate的时候传入了三个几何图形的绘图模板，其中第一个go.Shape则是默认的连线的线的数据。后面的两个go.Shape才是我们需要修改的箭头的样式，因此通过fromArrow和toArrow分别设置起始点和结尾点的箭头的样式。为了演示功能的需要，使用new go.Binding来动态的修改fromArrow和toArrow的值来修改不同的连线的箭头的样式，在实际开发中可以根据自己的需要使用不同的箭头的样式。
连线的箭头样式二
除了上面的掩饰的箭头属性之外，还有另外的一些箭头样式的属性。其配置的值和显示样式如下
links: [
{
from: "1",
to: "1-1",
fromArrow:"ForwardSlash",
toArrow:"BackSlash"
},
{
from: "1-1",
to: "1-1-1",
fromArrow:"Triangle",
toArrow:"DoubleBackSlash"
},
{
from: "1-1",
to: "1-1-2",
fromArrow:"TripleForwardSlash",
toArrow:"TripleBackSlash"
},
{
from: "1-1",
to: "1-1-3",
fromArrow:"Fork",
toArrow:"BackwardFork"
},
{
from: "1",
to: "1-2",
fromArrow:"LineFork",
toArrow:"BackwardLineFork"
},
{
from: "1-2",
to: "1-2-1",
fromArrow:"CircleFork",
toArrow:"BackwardCircleFork"
},
{
from: "1-2",
to: "1-2-2",
fromArrow:"CircleLineFork",
toArrow:"BackwardCircleLineFork"
},
{
from: "1-2",
to: "1-2-3",
fromArrow:"Circle",
toArrow:"Block"
},
{
from: "1",
to: "1-3",
fromArrow:"StretchedDiamond",
toArrow:"Diamond"
},
{
from: "1-3",
to: "1-3-1",
fromArrow:"Chevron",
toArrow:"StretchedChevron"
},
{
from: "1-3",
to: "1-3-2",
fromArrow:"NormalArrow",
toArrow:"X"
},
{
from: "1-3",
to: "1-3-3",
fromArrow:"TailedNormalArrow",
toArrow:"DoubleTriangle"
},
{
from: "1-1-2",
to: "1-2-2",
fromArrow:"BigEndArrow",
toArrow:"ConcaveTailArrow"
},
{
from: "1-2-2",
to: "1-3-2",
fromArrow:"RoundedTriangle",
toArrow:"SimpleArrow"
},
],
剩下的配置属性就不在这里一一进行展示了，如果对箭头的样式没有特殊要求的话，可以获取到所有的箭头的属性，然后随机配置即可。获取所有箭头样式的方法为
let arrowArr = go.Shape.getArrowheadGeometries().toKeySet().toArray();
可以根据自己的需要选择对应的连线的箭头的样式。
总结
可以通过修改箭头的样式来标记节点之间不同的关系，也可以通过设置箭头的样式来标记两个节点之间的路径，来实现对人物关系图的人物之间的关系分析。
