如何添加到樹狀圖文本的鏈接？

Question

我已應用聚類樹狀圖來顯示組織的結構。 它運作良好。 另外，我想添加到節點文本的鏈接。

我已將“ url”鍵添加到每個節點的json數組中

{
    "name": "Institutes",
    "children": [
        {   "name": "Social", "url": "http://social.example.com/" }, 
        {   "name": "Health", "url": "http://health.example.com/" },
        {   "name": "Nature", "url": "http://nature.example.com/" },
        {   "name": "Education", "url": "http://social.example.com/" }
    ]
}

有兩個問題：

<a>標記不會包裝所有<text>元素。 它顯示為<a></a><text></text> 。 我希望它是<a><text></text></a> 。
我如何從json讀取url鍵以將其添加為href屬性的值（請參見帶有注釋的行//??? ）？

d3.json("org_chart.json", function(error, root) {
        var nodes = cluster.nodes(root),
                links = cluster.links(nodes);
        var link = svg.selectAll(".link")
                .data(links)
                .enter().append("path")
                .attr("class", "link")
                .attr("d", diagonal);

        var node = svg.selectAll(".node")
                .data(nodes)
                .enter().append("g")
                .attr("class", "node")
                .attr("transform", function(d) {
                    return "translate(" + d.y + "," + d.x + ")";
                });

        node.append("circle")
                .attr("r", 5.1);

        node.append("a")
            .attr("href", "#") //???
            .attr("target","_blank");

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

還有一件事：

我努力了

node.append("a").attr("href", function (d) { return d.url;});

它返回undefined 。 我也嘗試過

node.append("a").attr("href", "http://example.com");

雖然看起來像

<g class="node" transform="translate(0,428.74692874692875)">
    <circle r="5.1"></circle>
    <a href="http://example.com/" target="_blank">
        <text dx="-9" dy="3" style="text-anchor: end;">
                Education
        </text>
    </a>
</g>

當我單擊它時，它不會打開http://example.com 。

Answer 1

當您使用selection.append(name)它將返回一個包含附加元素的新選擇，因此您可以直接對其進行另一個附加，如下所示：

node.append("a").append("text");

為了獲得url屬性，您需要使用訪問器函數，如下所示：

node.append("a").attr("href", function (d) {
    return d.url;
});

編輯：

對於鏈接，您可能需要在HTML文件中導入xlink命名空間：

<html xmlns:xlink="http://www.w3.org/1999/xlink">

並使用命名空間：

.append("svg:a").attr("xlink:href", urlAccessor)

在這里查看相關答案。

如何添加到樹狀圖文本的鏈接？

問題描述

1 個解決方案

解決方案1
1 已采納 2014-08-18 07:47:05

如何添加到樹狀圖文本的鏈接？

問題描述

1 個解決方案

解決方案1 1 已采納 2014-08-18 07:47:05

解決方案1
1 已采納 2014-08-18 07:47:05