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

Question

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

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

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

score 3 · Accepted Answer

最简单的方法是将链接放在 JSON 中的“名称”元素中。然后，您需要为其中的链接和元素创建svg:a元素而不是元素。例如线svg:textsvg: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 元素。有关链接的更多详细信息，请参阅SVG 规范。

或者，您可以使用svg:foreignObject为链接嵌入 HTML。请参阅此处了解更多信息。

score 2 · Accepted Answer

不知道，如果这仍然有用，但您只能使用 1 个 JSON。

只需返回 d.something_else_than_name 并且此“something_else_than_name”必须在 JSON 中的“name”之后进行描述。

所以，例如

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

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

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

希望这对某人有帮助。

2 回答 2