D3.js树结构文本链接

d3.js tree structure text links

本文关键字：文本 链接 结构 js D3      更新时间：2023-09-26

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

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

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

最简单的方法是将链接放在 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 元素。有关链接的更多详细信息，请参阅 SVG 规范。

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

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

只需返回d.something_else_than_name，此"something_else_than_name"必须在 JSON 中的"名称"之后进行描述。

因此，例如

{"name": "stackoverflow", "link": "http://stackoverflow.com"},
之后，在您的

页面中，您只需将其返回，如前所述：

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

希望这对某人有所帮助。

相关文章：