javascript - d3.js 树结构文本链接

Question

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

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

关于从哪里开始有什么建议吗？

Answer 1

最简单的方法是将链接放在 JSON 的“名称”元素中。然后，您需要为链接和其中的 svg:text 元素创建 svg:a 元素而不是 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获取更多信息。