Increasing clickable area of an edge in D3 diagram

Question

I have a graph being made by d3, with dagre-d3 sitting on top of it for drawing directed graphs. This gives me what I expect for rendering the graph:

enter image description here

To edit the data building the graph, each element is click-able. This is fine for the cases where the edges are rendered with labels, but they don't always have labels, leading to the unlabeled edges being very hard to click to edit. These style assigned to the edges is:

#visitGraph .edgePath {
   cursor: pointer;
   stroke: #333;
   stroke-width: 2px;
   fill: none;
   padding: 10px;
}

The rendered svg is:

<g class="edgePath enter">
    <path marker-end="url(#arrowhead)" d="M198.5,121L198,124.9C198.4,128.8,198.4,136.6,198.4,144.5C198.4,152.3,198.4,160.1,198.4,164.0L198.5,168" style="opacity: 1">
    </path>
</g>

Without changing the code in dagre-d3 to add over-drawing on the lines, like I've seen in other SVG suggestions, what can I do to increase the area around these elements that are clickable? I've already attempted padding, margin, and various values for pointer-events in the style to no avail.

You could increase the stroke width. This will make the lines wider though. — Lars Kotthoff, Jun 12 '14 at 15:57
I tried that, but by the time the edges are easily clickable, it looks quite ugly. — Matt Sieker, Jun 12 '14 at 17:03
The only alternative I can see would be to have some kind of dummy element that is invisible, but bigger handle the clicks. — Lars Kotthoff, Jun 12 '14 at 17:08
If I see no other suggestions, I'll probably make a patch for dagre and do a pull request. I can't imagine I'll be the only one using that library and needing this functionality. — Matt Sieker, Jun 12 '14 at 17:14

score 2 · Answer 1 · answered Nov 27 '15 at 08:46

This is how I did it, I'm pretty sure it'd work with path as well.

<g>
  <line class="clickable-area" stroke="transparent" stroke-width="5" x1="0" y1="0" x2="1" y2="1"></line>
  <line class="visible-edge" stroke="red" stroke-width="0.5" x1="0" y1="0" x2="1" y2="1"></line>
</g>

As you can see, there's a dummy edge with a larger stroke-width value and I put the original edge on that element.

score 0 · Answer 2 · answered Oct 28 '15 at 22:49

0

It looks like the <path> element has no fill. Could you change fill: none to fill: white or fill: transparent to make the entire area clickable?

answered Oct 28 '15 at 22:49

Shawn Allen

4,994
2
17
10

Samir Seetal · Answer 3 · 2017-01-05T19:39:00.467

I ended up using the labels to make it easier to click on. I used font awesome to make it a little more fancy.

g.setEdge(node1.uuid, node2.uuid, {
  labelType: "html",
  label: "<span class='fa fa-2x fa-info-circle'/>",
  style: getStyleForEdge(node1, node2),
  arrowheadStyle: getArrowForStyle(node1,node2)
});

//inner is the graph element
inner.selectAll("g.edgeLabel").on("click", function(id) {
   selectEdge(id);
});

Increasing clickable area of an edge in D3 diagram

3 Answers3

Linked