Reputation: 147
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
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.
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