javascript - 如何在 D3 可视化的文本元素中包含链接？

Question

我正在尝试添加指向此 D3 可视化文本元素的链接:

http://bl.ocks.org/1093025

我希望能够单击“flare”、“analytics”并导航到另一个页面或单击矩形并执行正常操作，即展开子树。

我尝试了一些没有用的东西:

• 在 事件上

我尝试将 on 事件添加到 svg:text 元素:

nodeEnter.append("svg:text")
  .attr("dy", 3.5)
  .attr("dx", 5.5)
  .text(function(d) { return d.name; })
  .on("click",function(d,i) { alert("Clicked on the text");});

• foreignObject 元素

我尝试像这样添加 foreignObject 元素:

 nodeEnter.append("svg:foreignObject")
  .style("float","right")
  .attr("height", 100)
  .attr("width", 100)
  .append("div")
  .html("<a href='#'>link</a>")

尽管它创建了链接，但它是一个额外的链接(不是矩形中的文本元素)。

• 使用 xlink:href 属性链接

最后，我还尝试了以下(在某些组合中):

<a xlink:href="/svg/index.html">
    <text x="10" y="20">/svg/index.html</text>
</a>

但是也没用。

有什么建议吗？

Answer 1

我同意 Matt 的回答:pointer-events...在 css 中将其更改为 pointer-events: all。

这就是我在力导向图中建立链接的方式:

svg = d3.select("body").append("svg");

svg.selectAll(".node")
  .append("svg:a").attr("xlink:href", function(d){ return "generic.php?url=" + d.url })
  .append("svg:text")
  .text(function(d) { return d.name; })
  .attr("dy", 3.5)
  .attr("dx", 5.5)
  .attr("text-anchor", "middle");
  //The End ;-)