Legible labels on links

GoJS
1

I would like to extend the previous graph with labels on links, I thought it would be better to continue on this topic rather than opening another one.

Following the ER Sample, I modified the linkTemplate adding the part the shows the same label on both link ends:

myDiagram.linkTemplate =
  $(CustomLink,  // defined below
    {
      routing: go.Link.AvoidsNodes,
      corner: 4,
      curve: go.Link.JumpGap
    },
    $(go.Shape, { stroke: "#2F4F4F", strokeWidth: 2 }),
    $(go.TextBlock,  // the "from" label
      {
        textAlign: "center",
        font: "bold 12px sans-serif",
        stroke: "#1967B3",
        segmentIndex: 0,
        segmentOffset: new go.Point(NaN, NaN),
        segmentOrientation: go.Link.OrientUpright
      },
      new go.Binding("text", "label")),
    $(go.TextBlock,  // the "to" label
      {
        textAlign: "center",
        font: "bold 12px sans-serif",
        stroke: "#1967B3",
        segmentIndex: -1,
        segmentOffset: new go.Point(NaN, NaN),
        segmentOrientation: go.Link.OrientUpright
      },
      new go.Binding("text", "label"))
  );

The result is the following, which is fine regarding the labels, but input/output ports are not accordingly spaced.

Chart1.jpg560×695 41.1 KB

Do you know if there is a way to accomplish this and make the labels easily readable?

An alternative solution could be to write labels inside nodes like in the Data Flow Sample, but this should be adapted to the right aligned ports, and I don’t know how to do that… :(

Any suggestion is appreciated,
Many thanks!

2

Try specifying a zero Y offset for the labels. Also it might help to have a translucent or opaque background.

    $(go.TextBlock, "text", // the "from" label
      {
        textAlign: "center",
        font: "bold 12px sans-serif",
        stroke: "#1967B3",
        background: "white",
        segmentIndex: 0,
        segmentOffset: new go.Point(NaN, 0),
        segmentOrientation: go.Link.OrientUpright
      },
      new go.Binding("text", "label")),
    $(go.TextBlock, "text", // the "to" label
      {
        textAlign: "center",
        font: "bold 12px sans-serif",
        stroke: "#1967B3",
        background: "white",
        segmentIndex: -1,
        segmentOffset: new go.Point(NaN, 0),
        segmentOrientation: go.Link.OrientUpright
      },
      new go.Binding("text", "label"))

Did you really want both labels for each link to show the same text?

Also, are you sure that you want the labels to be on the links rather than with each port? Or are you guaranteed never to have more than one link at any port, and you don’t want to show any labels when there are no links? I see you have seen the Data Flow samples, so you can adapt the code from there.

3

Thanks, that is exactly what I needed! The same label has to be written on both ends because this is a circuit diagram that electricians need for connecting cables and they provided us these specifications.
I will take a look at labels inside nodes, too, but I think this is the best solution.

Thank you very much! :)