D3.js对象中的超链接，第2部分 [英] Hyperlinks in D3.js objects, part 2

问题描述

我是D3的新手，但我根据这个例子整理了一张Reingold-Tilford树：
http://bl.ocks.org/mbostock/4339184

I'm very new to D3 but I've put together a Reingold-Tilford tree based on this example: http://bl.ocks.org/mbostock/4339184

我正在尝试向每个子节点添加超链接结束其中一个链 - 基本上，任何节点前面都有一个白色圆圈。

I'm trying to add hyperlinks to the each child node that concludes one of the chains - basically, any node that has a whitish circle in front of it.

我发现这个有用的解释如何添加超链接 - d3.js对象中的超链接 - 但遗憾的是我只理解了其中的一半。

I found this helpful explanation of how to add hyperlinks - Hyperlinks in d3.js objects - but unfortunately I only understand half of it.

作者写道：

这很简单，只需添加一些关键：价值对。示例：

It is quite easy, just add some more "key" : "value" pairs. Example:

        "children": [
        {
            "name": "Google",
            "size": 3938,
            "url":  "https://www.google.com"

        },
        {
            "name": "Bing",
            "size": 3938,
            "url":  "http://www.bing.com"

        }
    ]

我同意，这很容易 - 我做到了这一点。但是在我完成它之后，如何将页面代码更改为，正如其他帖子中的帮助器所写的那样，在d3绘图代码中，为每个数据元素追加节点，包装您想要的元素带有svg：a标签的可点击链接：

I agree, this is easy - I've done this. But after I've done it, how do I change the code of the page to, as the helper in that other post wrote, "in the d3 drawing code where you append nodes for each data element you wrap the element you want to be clickable links with an svg:a tag:"

nodeEnter.append("svg:a")
.attr("xlink:href", function(d){return d.url;})  // <-- reading the new "url" property .append("svg:rect")
.attr("y", -barHeight / 2)
.attr("height", barHeight)
.attr("width", barWidth)
.style("fill", color)
.on("click", click);  // <- remove this if you like

这是我不明白的。有人可以解释我需要如何修改它以与本例中的文本保持一致 - http：// bl .ocks.org / mbostock / 4339184

This is what I don't understand. Can someone please explain how I need to modify this to align with the text in this example - http://bl.ocks.org/mbostock/4339184

提前谢谢你。

Matt

推荐答案

首先，您需要检查您要追加的节点是否有子节点，这样您就可以区分出哪些节点链接和文本。完成后，您可以添加正确的元素。因此，不要像现在一样只添加文本元素：

First you would need to check if the node you're appending has children, so you can then differentiate which are going to be links and which will be text. After you have done that you can then append the right element. So instead of adding only text elements like you're doing now:

node.append("text")
    .attr("dx", function(d) { return d.children ? -8 : 8; })
    .attr("dy", 3)
    .attr("text-anchor", function(d) { return d.children ? "end" : "start"; })
    .text(function(d) { return d.name; });

循环遍历它们，确定谁有孩子，并相应地附加正确的元素：

Loop over them, determine who has children and append the right element accordingly like this:

node.each(function(d){
    var thisNode = d3.select(this);
    if (!d.children) {
        thisNode.append("a")
            .attr("xlink:href", function(d) { return d.url; })
            .append("text")
                .attr("dx", 8)
                .attr("dy", 3)
                .attr("text-anchor", "start")
                .text(function(d) { return d.name; });
    } else {
        thisNode.append("text")
            .attr("dx", -8)
            .attr("dy", 3)
            .attr("text-anchor", "end")
            .text(function(d) { return d.name; });      
    }
});

现在只有没有孩子的节点才会被超链接。仅供参考：你可以看到我遗漏了一些只检查儿童的冗余功能，因为那时你已经知道节点是否有任何你不再需要它们了。

Now only nodes who don't have children will be hyperlinked. FYI: As you can see i've left out some redundant functions which only checked for children, since you by then already know if the node has any you won't be needing those anymore.

这篇关于D3.js对象中的超链接，第2部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！