I am evaluating whether I can use GoJS for my application.
I need to draw links like in the picture below.
I can see how to realize the appearance with extra nodes/links, but it would be great if this can be done using a link Geometry customization - because then there will be a 1-to-1 map between the semantics of my application and the GoJS diagram.
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;
}