D3.js 对象中的超链接，第 2 部分

Question

我对 D3 很陌生，但我已经根据这个例子整理了一个 Reingold-Tilford 树： http://bl.ocks.org/mbostock/4339184

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

我发现这个关于如何添加超链接的有用解释 - Hyperlinks in d3.js objects - 但不幸的是我只理解了一半。

作者写道：

这很简单，只需添加更多“键”：“值”对。示例：

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

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

        }
    ]

我同意，这很容易 - 我已经做到了。但是在我完成之后，我如何将页面的代码更改为，正如另一篇文章中的助手所写的那样，“在 d3 绘图代码中，您为每个数据元素附加节点，您包装了您想要的元素带有 svg:a 标签的可点击链接："

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

提前谢谢你。

马特

Answer 1

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

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; });

遍历它们，确定谁有孩子并相应地附加正确的元素，如下所示：

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; });      
    }
});

现在只有没有子节点的节点才会被超链接。仅供参考：如您所见，我省略了一些仅检查子节点的冗余函数，因为到那时您已经知道节点是否有任何您将不再需要的函数。