But now that I see it, I’m not sure about having one half be dashed and the other half being solid. OK, so make one small change to MultiColoredLink:
function MultiColoredLink() {
go.Link.call(this);
}
go.Diagram.inherit(MultiColoredLink, go.Link);
MultiColoredLink.prototype.makeGeometry = function() {
var geo = go.Link.prototype.makeGeometry.call(this);
var colors = this.data.colors;
if (Array.isArray(colors) && colors.length > 0) {
var paths = []; // find all path Shapes
this.elements.each(function(elt) {
if (elt.isPanelMain && elt instanceof go.Shape) {
paths.push(elt);
}
});
var numcolors = Math.min(colors.length, paths.length);
if (numcolors > 0) {
var seclen = geo.flattenedTotalLength / numcolors; // length of each color section
for (var i = 0; i < paths.length; i++) { // go through all path Shapes
var shape = paths[i];
if (i < numcolors) {
shape.visible = true; // make sure this Shape can be seen
shape.stroke = colors[i]; // and assign a color
if (i > 0) { // and a stroke dash array so that it only draws the needed fraction
shape.strokeDashArray = [0, i * seclen, seclen, 99999];
}
} else { // unneeded Shapes are not visible
shape.visible = false;
}
}
}
}
return geo;
}
And define the Link template:
myDiagram.linkTemplate =
$(MultiColoredLink,
{ . . . },
$(go.Shape, { isPanelMain: true, strokeWidth: 3, strokeDashArray: [3, 3] }),
$(go.Shape, { isPanelMain: true, strokeWidth: 3 }),
$(go.Shape, "Circle", { width: 20, height: 20, fill: "white", strokeWidth: 3 })
);
And then a model of:
{ "class": "go.GraphLinksModel",
"nodeDataArray": [
{"key":1, "text":"Alpha", "color":"lightblue"},
{"key":2, "text":"Beta", "color":"orange"}
],
"linkDataArray": [
{"from":1, "to":2, "colors":[ "purple", "green" ]}
]}
produces this result: