Svg 增加D3图中边缘的可点击区域
我有一个由d3绘制的图,dagre-d3位于图的顶部,用于绘制有向图。这为我提供了渲染图形所需的功能: 要编辑构建图形的数据,可以单击每个元素。对于使用标签渲染边的情况,这是很好的,但它们并不总是有标签,这会导致很难单击以编辑未标记的边。指定给边的这些样式是:Svg 增加D3图中边缘的可点击区域,svg,d3.js,dagre-d3,Svg,D3.js,Dagre D3,我有一个由d3绘制的图,dagre-d3位于图的顶部,用于绘制有向图。这为我提供了渲染图形所需的功能: 要编辑构建图形的数据,可以单击每个元素。对于使用标签渲染边的情况,这是很好的,但它们并不总是有标签,这会导致很难单击以编辑未标记的边。指定给边的这些样式是: #visitGraph .edgePath { cursor: pointer; stroke: #333; stroke-width: 2px; fill: none; padding: 10px; }
#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建议中看到的那样,我可以做些什么来增加这些元素周围可单击的区域?我已经尝试了
填充
,边距
,以及样式中的指针事件
的各种值,但均无效。看起来
元素没有填充
。您能将fill:none
更改为fill:white
或fill:transparent
以使整个区域可点击吗?我就是这样做的,我很确定它也可以与路径
一起工作
<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>
正如您所看到的,有一个伪边,它的笔划宽度值更大,我将原始边放在该元素上 我最后使用了标签,以便于点击。我用了很棒的字体让它看起来更别致
g.setEdge(node1.uuid、node2.uuid、{
标签类型:“html”,
标签:“,
样式:getStyleForEdge(节点1、节点2),
箭头头样式:getArrowForStyle(节点1、节点2)
});代码>可以增加笔划宽度。这将使线条更宽。我尝试过,但当边缘很容易点击时,它看起来很难看。我能看到的唯一替代方法是使用某种不可见的虚拟元素,但较大的元素可以处理点击。如果我看不到其他建议,我可能会为dagre制作一个补丁并执行拉取请求。我无法想象我将是唯一一个使用该库并需要此功能的人。