d3.js對象中的超鏈接

我在d3.js或java中是一個完整的新手。我正在使用來自http://bl.ocks.org/1093025的縮進樹示例。我花了兩個小時才把它用在我的本地計算機上，這樣應該可以讓你瞭解我的技能水平。d3.js對象中的超鏈接

我打開flare.json文件並開始搞亂它，並能夠成功操作它。它看起來像這樣

{ 
    "name": "Test D3", 
    "children": [ 
     { 
      "name": "News", 
      "children": [ 
       { 
        "name": "CNN", 
        "size": 1000 
       }, 
       { 
        "name": "BBC", 
        "size": 3812 
       } 
      ] 
     }, 
     { 
      "name": "Blogs", 
      "children": [ 
       { 
        "name": "Engaget", 
        "size": 3938 
       } 
      ] 
     }, 
     { 
      "name": "Search", 
      "children": [ 
       { 
        "name": "Google", 
        "size": 3938 
       }, 
       { 
        "name": "Bing", 
        "size": 3938 
       } 
      ] 
     } 
    ] 
}

我現在想要做的是嘗試添加超鏈接。例如，我希望能夠點擊「CNN」並前往CNN.com。是否有我可以做flare.json的修改，這將做到這一點？

來源

2012-10-27 Mr. Fegur

這很容易，只需添加一些「關鍵」：「價值」對。例如：

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

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

      } 
     ]

當然，在你的代碼D3然後你需要append<svg:a>標籤並設置其屬性xlink:href。

以下是一些可能對您有所幫助的html和d3代碼。首先，你需要導入XLink命名空間中的HTML文件：

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

然後在您添加節點爲每個數據元素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

你可能想要刪除的點擊處理程序（這是在最初的例子存在）刪去。對（「點擊」，單擊），因爲它可能與SVG鏈接的默認行爲干擾。

點擊你的rect s現在應該引導你到合適的url。 SVG鏈接可能無法在所有瀏覽器中完全實現。

或者，您可以修改click處理程序以從d.url中讀取URL，並使用該處理程序通過JavaScript手動將瀏覽器重定向到該URL：window.location = d.url;。那麼你不需要svg:a標籤和xlink代碼。儘管添加真實鏈接（不是腳本化鏈接）的好處是用戶/瀏覽器可以決定要做什麼（例如，在新標籤頁中打開）。如果您的某些用戶禁用了JavaScript，這也會有所幫助。

來源

2012-10-28 13:27:45 Juve

非常感謝。我能夠使它與你的答案一起工作。 –

關於哪些**瀏覽器**支持SVG鏈接**，請看看這裏：http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Scalable_Vector_Graphics%29 – rmoestl

請注意，至少在Chrome中，你不需要在任何地方聲明任何名稱空間，並且在D3.js v3中，您只需編寫'.append（'a'）'而不是'.append（'svg：a'）'。但是，您仍然需要編寫'xlink：href'。如果你仍然需要DOM中的命名空間，現在你似乎必須使用[這個黑客]（https://groups.google.com/forum/#!msg/d3-js/Sh4ysLFBMRQ/hHjzBP0bX1oJ）來阻止它們用D3.js插入時消失 – mb21

d3.js對象中的超鏈接

回答

相關問題