Question

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

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

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

作者写道：

这很简单，只需添加一些＆＃34; key＆＃34; ：＆＃34;价值＆＃34;对。例如：

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

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

        }
    ]

我同意，这很容易 - 我已经做到了。但是在我完成之后，我如何将页面代码更改为，正如其他帖子中的帮助者所写的那样，在d3绘图代码中为每个数据元素追加节点你希望成为可点击链接的元素与svg：a标签：＆＃34;

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

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

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

1 个答案: