Increasing clickable area of an edge in D3 diagram

问题

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:

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.

回答1:

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.

回答2:

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?

回答3:

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);
});

来源：https://stackoverflow.com/questions/24188705/increasing-clickable-area-of-an-edge-in-d3-diagram

标签

svg

d3.js

dagre-d3