Toggling visibility of links

extends https://github.com/anvaka/ngraph.pixel/issues/6

I also love this tool, thanks so much @anvaka.

I’m making a graph has dense links, and I want to reveal link links for a given node only when I hover over that node. Like this :

(this is a community living on a decentralised database scuttlebutt)

In this setup, I’ve got dark links and light links, but would rather hide links.

The new API for hiding links is great :

var renderer = renderGraph(graph, {
  link: function createLinkUI(link) {
    if (link.data === 'hidden') return; // don't need to render!
    // otherwise return default link:
    return {
      fromColor: 0xFFFFFF,
      toColor: 0xFFFFFF
    };
  }
});

When we set up a renderer.on('nodehover', (node) => {...} ), it’s then hard/ impossible to make make the links visible. (I’m not actually sure if they got created, I couldn’t quite follow the code). I’ve noticed that the node in that context has links which each have an id, but these can’t be fetched using renderer.getLink

renderer.forEachLink also does nothing, suggesting there are no edges / links registered in the renderer.

Would appreciate any suggestions / ideas about how best to approach this.

[anvaka]

Thank you for the ping @mixmix !

I played with this and to my surprise was able to achieve hover-only links with small amount of code. Here is a demo

If link’s position changes while the links are visible (and you want to update it), you’d have to call

var edgeView = renderer.edgeView();

// sequence of this mostly identical names is important
// Also note that 5 years younger me was not able to write
// readable code - I can't explain otherwise such a poor
// choice of function names :D
edgeView.refresh();
edgeView.update();

PS: I am not using this repository anymore, and all my latest graph drawings are done with graph-start repository - please check it out if you haven’t yet.

[mixmix]

(I’d be prepared to chip in some money too)