Question

我正在使用d3来查看图表。我使用svg：path来绘制链接。我希望我的链接可以点击。我把onclick事件放在它们上面，但只有当你单击该线本身并且它太窄而无法点击时它才有效。因此，我决定在原始路径中添加另一条路径，使其不可见且更加丰富，以便用户可以轻松点击它。这是我将虚拟路径添加为原始路径的代码。

paths=link.append("svg:path")
.attr("class", function(d) { return "link " + d.type; })
.attr("marker-end", function(d) { return "url(#" + d.type + ")"; })
.style("stroke",function(d){
    if(d.Uid=="merged")return merged_edge_color;
    else return "#000";
}).style("stroke-width",function(d){
    if(d.Uid=="merged")return 4;
    else return 2;
}).on("mouseover", edge_click);

paths.append("svg:path").attr("class","path_clickable")
      .style("stroke-width",5).style("stroke","#000")
      .on("mouseover", edge_click);

edge_click函数是我处理点击的功能。并且我相对于原始路径更新虚拟路径的 d 属性。现在的问题是，当我加载图形时，我看不到我添加的虚拟路径。这是我在Firefox检查器中看到的：

<path d="M519.6082605229858,264.2807401557369A963797.516994379,963797.516994379 0 0,1 465.2163670278527,322.64265504894405" style="stroke-width: 5; stroke: rgb(0, 0, 0);" class="path_clickable"></path>
      <path d="M519.6082605229858,264.2807401557369A963797.516994379,963797.516994379 0 0,1 465.2163670278527,322.64265504894405" style="stroke-width: 5; stroke: rgb(0, 0, 0);" class="path_clickable"></path>

除了班级名称之外，他们之间没有区别。但是当我选择假人时，检查员没有显示任何内容。

使svg：path易于点击

0 个答案: