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

我同意Matt的回答：指针事件......将其更改为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 ;-)

Answer 2

.on('click', function () {})只要你

就可以工作

选择了正确的节点
未使用css

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

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

2 个答案: