d3.js树结构文本链接

Question

我正在使用我自己的.json文件中的数据集修改其中一个d3示例的树结构。我有一份包含我自己数据的工作副本。我现在要做的是修改文本，以便链接到相应的URL。我发现，似乎没有太多关于如何做到这一点的文档。

这是我正在使用的示例树：http://bl.ocks.org/1249394

有关从哪里开始的任何建议？

Answer 1

最简单的方法是将链接放在JSON中的“name”元素中。然后，您需要为其中的链接和svg:a元素创建svg:text元素而不是svg:text元素。例如。这条线

nodeEnter.append("svg:text").text(function(d) { return d.name; });

变为

nodeEnter.append("svg:a").attr("xlink:href", function(d) { return d.name; })
.append("svg:text").text(function(d) { return d.name; });

您当然可以为链接目标和文本分别使用JSON元素。有关链接的详细信息，请参阅the SVG spec。

或者，您可以使用svg:foreignObject为链接嵌入HTML。有关详细信息，请参阅here。

Answer 2

Dunno，如果这仍然有用，但你只能使用1个JSON。

只需返回d.something_else_than_name，并且必须在“名称”之后的JSON中描述此“something_else_than_name”。

所以，例如，

{"name": "stackoverflow", "link": "http://stackoverflow.com"},

然后在你的页面中你只需返回它，如前所述：

.attr("xlink:href", function(d) { return d.link; })

希望这会对某人有所帮助。