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

【问题标题】：How to include links in a D3 visualisation's text element?如何在 D3 可视化的文本元素中包含链接？
【发布时间】：2012-12-05 17:03:38
【问题描述】：

我正在尝试添加指向此 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>

但它也不起作用。

有什么建议吗？

【问题讨论】：

on('click' function () {}) 应该可以工作，只要您 a) 选择了正确的节点并且 b) 没有使用 css 禁用文本元素上的指针事件。
天啊，没错！文本节点确实有pointer-events: none;，它阻止了该操作。谢谢！您介意添加一个答案，以便我将其标记为正确吗？

标签： javascript svg d3.js

【解决方案1】：

我同意马特的回答：指针事件...在 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 ;-)

【讨论】：

【解决方案2】：

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

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

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

【讨论】：