Link overlays the text block of nodes in self pointing situation

Environment:

  • Browser(Chrome latest)
  • go.js 2.0.16

Hi, I’ve tried drawing a network diagram using go.js and faced an issue lately that links overlay the text block of nodes in self pointing situation.

Screenshot:
41

As you see, the link which comes from a node and points the same one overlays the text block of the node.

new go.Binding('routing', 'routing', (val) => {
  return go.Link[val];
}),
new go.Binding('curve', 'curve', (val) => {
  return go.Link[val];
}),
new go.Binding('curviness', 'curviness')

I’ve tried it like above, but it didn’t solve the issue.
Any insight would be appreciated!

Do you just want the reflexive link to be routed on the top of the node rather than on the bottom? If so, try this binding on Link.curviness, which gets a value of -10 when it’s reflexive and 0 otherwise:

      $(go.Link,
        new go.Binding("curviness", "", function(link) {
          return link.fromNode === link.toNode ? -10 : 0;
        }).ofObject(),
        $(go.Shape),
        $(go.Shape, { toArrow: "OpenTriangle" })
      )

The Binding using a source property of “” and being Binding.ofObject makes this solution inefficient. It actually would be more efficient to override https://gojs.net/latest/api/symbols/Link.html#computeCurviness, which is also necessary if you may have multiple reflexive links.

1 Like

Thanks! It perfectly works :D