Question about customizing link appearance

GoJS
#1

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.

Is this possible in GoJS?

thanks,
A.

06
Screen Shot 2018-08-12 at 22.21.06.png1790×628 55.7 KB

Custom link with multiple segments
#2

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:
image

1 Like
#3

Wow, I’m very impressed that it could be done so easily.

You’ve got yourself a customer.