超鏈接在D3.js對象，第2部分

Question

我很新的D3，但我已經把基於此示例萊因戈爾德-蒂爾福德樹： 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; });  
    } 
}); 

現在只有節點誰不沒有孩子會超鏈接。僅供參考：正如你所看到的，我遺漏了一些只針對兒童進行檢查的冗餘功能，因爲你已經知道節點是否有任何你不再需要的功能。