d3.js树结构文本链接 [英] d3.js tree structure text links

问题描述

我正在使用.json文件中的自己的数据集从一个d3示例修改树结构。我有一个工作副本与我自己的数据。我现在想做的是修改文本，以便它们链接到相应的网址。

I am modifying a tree structure from one of the d3 examples with my own data set in a .json file. I have a working copy with my own data. What I want to do now is modify the text so that they link to corresponding urls. There doesn't seem to be much documentation, that I've found, about how to do this.

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

This is the example tree that I am using: http://bl.ocks.org/1249394

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

Any suggestions on where to start?

推荐答案

最简单的方法是将链接放在name元素在JSON中。然后，您需要为链接和 svg：a 元素，而不是 svg：text > svg：text 里面的元素。例如。

The easiest way to do this would be to put the links in the "name" element in the JSON. You then need to create svg:a elements instead of svg:text elements for the links and svg:text elements inside them. E.g. the line

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规范。

You could of course have seperate JSON elements for link target and text. See the SVG spec for more details on linking.

或者，您可以使用 svg：foreignObject 嵌入链接的HTML。有关详情，请参见此处。

Alternatively, you could use svg:foreignObject to embed HTML for the link. See here for more information.

这篇关于d3.js树结构文本链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！