擴展D3樹佈局，以在最後一個節點

提供HTML框我想延長D3樹佈局爲每個最終節點提供超鏈接和文本擴展D3樹佈局，以在最後一個節點

http://mbostock.github.io/d3/talk/20111018/tree.html

例如，如果你去

flare> analytics > ckuster > AgglomerativeClustr

我想根據文本AgglomerativeCluster我想有一個文本框能夠具有自定義的HTML。

我該怎麼做？

來源

2014-05-06 FutuToad

有幾種方法可以實現你想要的，但我相信下面的解決方案既簡單又高效。

我也有與你相似的例子開始，也沒有任何鏈接：

link to jsfiddle - starting point，

，並會引導您完成所有必要的，但簡單的修改。

首先，讓我們來添加域「網址」，我們希望有標籤的超鏈接節點：

 { 
      "children": [{ 
      "name": "AgglomerativeCluster", 
      "size": 3938, 
      "url": "http://www.example.com/"  
     }, { 
      "name": "CommunityStructure", 
      "size": 3812, 
      "url": "http://www.example.com/"  

     }, { 
      "name": "HierarchicalCluster", 
      "size": 6714, 
      "url": "http://www.example.com/"  

     }, { 
      "name": "MergeEdge", 
      "size": 743, 
      "url": "http://www.example.com/"  
     }

現在，讓我們寫的是選擇其節點的數據包含在現場「URL」任何事情的所有標籤代碼，併爲每個這樣的標籤添加適當的時鐘處理程序，將打開相應網址：（其還設置不同的光標指針鼠標懸停讓用戶知道標籤實際上是一個超鏈接）

d3.selectAll(".node text") 
    .filter(function(d){ return d.url; }) 
    .style("cursor", "pointer") 
    .on("click", function(d){ 
     document.location.href = d.url; 
    });

這就是它！

link to jsfiddle - finished example

來源

2014-05-06 12:44:57 VividD

注：由我完成這篇文章的時候，我的好哥們@VividD已經提供了答案。但是由於OP表達了對定製HTML的期望，這可能仍然是相關的。

基本上，人們希望以一種或另一種形式將HTML與SVG混合在一起，這是一種常見的請求。然而，你很可能找不到現成的實現，因爲它需要時間並且有相當數量的佈局考慮因素才能使其工作（請參閱下面鏈接的小提琴中的x，y屬性的設置 - 爲了簡單起見硬編碼）。話雖如此，這是我的努力幫助你。

最常見的解決方案是使用SVG:foreignObject。 但請注意，IE不支持它。這是一個偉大的邁克展示了一個非常簡單的例子gist。我冒昧地將其擴展並創建了一個帶有textarea的稍微更精細的示例（帶有textarea的表單）。我相信這應該足以產生一些想法並讓你走。

svg.append("foreignObject") 
    .attr("x", 40) 
    .attr("y", 40) 
    .attr("width", 480) 
    .attr("height", 240) 
    .append("xhtml:body") 
    ...

如果您沒有完全解決您的問題，您可能需要考慮自己生成一個小提琴（基於此）。

來源

2014-05-06 13:23:07 FernOfTheAndes

擴展D3樹佈局，以在最後一個節點

回答

相關問題