在 D3 图中增加边缘的可点击区域答案

【问题标题】：Increasing clickable area of an edge in D3 diagram在 D3 图中增加边缘的可点击区域
【发布时间】：2014-06-12 15:50:29
【问题描述】：

我有一个由 d3 制作的图表，dagre-d3 放在它上面用于绘制有向图。这给了我渲染图表的期望：

要编辑构建图表的数据，每个元素都是可点击的。这对于使用标签渲染边缘的情况很好，但它们并不总是有标签，导致未标记的边缘很难单击以进行编辑。这些分配给边缘的样式是：

#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 的各种值，但均无济于事。

【问题讨论】：

您可以增加笔画宽度。不过，这会使线条变宽。
我试过了，但是当边缘很容易点击时，它看起来很丑。
我能看到的唯一选择是拥有某种不可见的虚拟元素，但更大的点击量。
如果我没有看到其他建议，我可能会为 dagre 打一个补丁并提出拉取请求。我无法想象我会是唯一使用该库并需要此功能的人。

标签： svg d3.js dagre-d3

【解决方案1】：

我就是这样做的，我很确定它也适用于 path。

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

如您所见，有一个具有较大 stroke-width 值的虚拟边，我将原始边放在该元素上。

【讨论】：

【解决方案2】：

看起来<path> 元素没有fill。您能否将fill: none 更改为fill: white 或fill: transparent 以使整个区域都可点击？

【讨论】：

【解决方案3】：

我最终使用标签使其更易于点击。我用了很棒的字体让它更花哨。

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

【讨论】：