增加D3图中边缘的可点击区域 [英] Increasing clickable area of an edge in D3 diagram

问题描述

我有一个由d3做的图，dagre-d3坐在它的顶部，用于绘制有向图。这给了我期望绘制图形的效果：

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

呈现的svg是：

<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>

不更改dagre-d3中的代码以在行上添加绘图，在其他SVG建议中看到，我可以做些什么来增加这些可点击元素的面积？我已经尝试过 padding ， margin 以及 pointer-events 在样式中没有效果。

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.

推荐答案

我最终使用标签， 。

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

这篇关于增加D3图中边缘的可点击区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！