我有一个由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
的各种值无效。
答案 0 :(得分:2)
我就是这样做的,我很确定它也适用于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
值的虚拟边缘,我将原始边缘放在该元素上。
答案 1 :(得分:0)
看起来<path>
元素没有fill
。您是否可以将fill: none
更改为fill: white
或fill: transparent
以使整个区域可以点击?
答案 2 :(得分:0)
我最终使用标签使其更容易点击。我使用字体很棒,让它更加花哨。
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)
});
&#13;
//inner is the graph element
inner.selectAll("g.edgeLabel").on("click", function(id) {
selectEdge(id);
});