Only show links on mouse over of nodes

GoJS
1

The links are shown automatically as long as my json object contains something like this:

“linkDataArray”: [
{“from”:“1”, “to”:“2”},
{“from”:“1”, “to”:“3”},
{“from”:“1”, “to”:“4”},
{“from”:“4”, “to”:“5”},
{“from”:“4”, “to”:“6”},
{“from”:“7”, “to”:“2”},
{“from”:“7”, “to”:“3”}
]}

However, I would like to only display the links if I mouse over the node.

For e.g., in the above example, if I mouse over node 1, the links connecting to 2, 3 and 4 will show up.

Or if I were to mouse over node 2, the links connecting to node 1, 3 and 4 will show up.

How do I hide the links by default?

2

I would change your link template to:

        myDiagram.linkTemplate =
          $$(go.Link, go.Link.AvoidsNodes,
              { corner: 3 },
              $$(go.Shape,
                  { stroke: "whitesmoke", strokeWidth: 2 })
          );

And I would add the following event handlers to your Node template(s):

    {
      mouseEnter: function(e, node) {
        for (var it = node.linksConnected; it.next(); ) {
          var link = it.value;
          link.path.stroke = "black";
        }
      },
      mouseLeave: function(e, node) {
        for (var it = node.linksConnected; it.next(); ) {
          var link = it.value;
          link.path.stroke = "whitesmoke";
        }
      }
    },
3

Am I right to say, this workaround is to make the links blend with the background?

If my background were to be black, I have to make the stroke black as well, and say… green, on mouse over?

Is there anyway to make the links transparent, or not show at all, regardless of background colours?

4

Use the “transparent” color.

5

Great, thanks!