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

Question

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

http://bl.ocks.org/1093025

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

我尝试了一些不起作用的方法：

• on事件

我试图向元素添加一个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

我同意马特的回答：指针事件...将其更改为pointer-events: all在 css 中。

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

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

Answer 2

.on('click', function () {})应该只要你工作

• 选择了正确的节点
• 尚未使用 css 禁用文本元素上的指针事件

指针事件似乎吸引了人们，因为很多示例都有pointer-events: none文本节点。