go.js动态自定义设置连线颜色

如图，需要各个模块之间的连线颜色自定义设置

第一种方法

提示：和此图官网代码一样，数据中直接设置给定颜色
//链接形状和箭头的笔触数据绑定到“ color”属性

myDiagram.linkTemplate =
		        $(go.Link,
		          { toShortLength: 3, relinkableFrom: true, relinkableTo: true },
		          $(go.Shape,
		            { strokeWidth: 2 },
		            new go.Binding("stroke", "color")),
		          $(go.Shape,
		            { toArrow: "Standard", stroke: null },
		            new go.Binding("fill", "color"))
		        );

数据

var nodeDataArray = [
		        { key: 1, text: "烧烤"},
		        { key: 2, text: "火锅"},
		        { key: 3, text: "炒菜"},
		        { key: 4, text: "面条"}
		      ];
		      var linkDataArray = [
		        { from: 1, to: 2, color: "red" },
		        { from: 2, to: 3,color:"yellow"},
		        { from: 3, to: 4, color: "blue" },
		        { from: 4, to: 1, color: "#000000" }
		      ];

第二种方法

如果在数据中不能直接给定颜色或者需要进行复杂的判断，需要前端进行外部判断

myDiagram.linkTemplate =
		        $(go.Link,
		          { toShortLength: 3, relinkableFrom: true, relinkableTo: true },
				  $(go.Shape, {strokeWidth: 2},
					    new go.Binding("stroke", "from", (f) => {
					    //'from'为我从数据中取的参数名，也可以取其他需要的参数
					    //1可以直接判断然后return出颜色就行了
					    //2复杂的话将连线的from参数取到传入自定义的方法colorSet中进行判断
							return colorSet(f);
					})),
		          $(go.Shape,
		            { toArrow: "Standard", stroke: null },
		            new go.Binding("stroke", "from", (f) => {
		            		return colorSet(f);
		            }))
		        );
function colorSet(param){//自定义个方法来判断
					console.log(param)
					switch (param) {
			            case 1:return "red";
			            case 2:return "yellow";
			            case 3:return "blue";
			            case 4:return "#000000";
			            default:return "#eee";
			        }
				}

数据

var nodeDataArray = [
		        { key: 1, text: "烧烤"},
		        { key: 2, text: "火锅"},
		        { key: 3, text: "炒菜"},
		        { key: 4, text: "面条"}
		      ];
		      var linkDataArray = [
		        { from: 1, to: 2},
		        { from: 2, to: 3},
		        { from: 3, to: 4},
		        { from: 4, to: 1}
		      ];

以上就完成了连线颜色的设置。

---