Lieberta
Lieberta

Reputation: 147

Link to reference for d3 network graph overlay

Would like to ask a simple question. I would like to create an overlay layer on top of the link element in d3 network graph. Is there a sample I can follow? I have been trying to search but I can't find any example for it.

Thanks in advance.

Upvotes: 0

Views: 97

Answers (1)

SteveR
SteveR

Reputation: 1131

One good example that I can think of is used by Node-RED to draw their flow diagrams...

Create multiple network links between each pair of nodes -- the first would be a transparent "background" link with a "wide" stroke (e.g. 20px). Then draw the visible link directly on top of it, but use css to set pointer-events: none;. This enables the mouse enter/exit/hover events to be detected over the wider background lines, whenever the pointer is "near" the visible link.

enter image description here

Their technique also uses a third "outline" link in white that is 1 px wider than the visible link (between the background and foreground links). This helps to provide a half pixel of separation between the visible links in areas where there are lots of overlapping lines...

Upvotes: 1

Related Questions