如何鏈接D3.js強制佈局中的json數據的額外屬性？

Question

我已經按照Mike Bostock中的各種示例創建了具有有向路徑和節點上的圖像的可摺疊力佈局（與this other question有關）。

現在，我想鏈接一些額外的信息給一些節點，如果它們包含任何額外的信息，由json字符串中的數據構成。

JSON字符串，看起來像這樣：

{ 
    "name": "Somename", 
    "text": "Some text", 
    "extradata": [ 
      { 
       "type": "sometype", 
       "icon": "someicon.png" 
      }, 
      { 
       "type": "sometype02", 
       "icon": "someicon.png" 
      } 
    ], 
    "children": [ 
    { 
     "name": "Somename", 
     "text": "Some text", 
     "extradata": [ 
      { 
       "type": "sometype", 
       "icon": "someicon.png" 
      }, 
     ] 
    }, 
    { 
     "name": "Somename", 
     "text": "Some text", 
     "extradata": [ 
      { 
       "type": "sometype", 
       "icon": "someicon.png" 
      }, 
      { .... }, 
      { .... }, 
      { .... }, 
      .... 
     ], 
     "children": [ 
     { 
      .... 
     } 
    }, 
    ........ 

總之，我想顯示一些extradata[]陣列連接到每一個節點，該屬性而額外的值的。最終結果如下圖所示，其中藍色圓圈表示來自額外數據的內容（例如sometype或sometype02）。

我無法理解如何解析JSON字符串，以獲得這些價值，以及如何創建鏈接到他們所屬的節點。

Answer 1

d3的美妙之處在於Javascript對象與代表它們的DOM對象有內在聯繫。你甚至可以說數據驅動器的文件。

想必你有這樣的事情：

var node = svg.selectAll(".node") 
    .data(data.nodes) 
    .enter().append("circle") 
    [...] 

也許你想根據JSON的第一datatype屬性顏色的每個節點：

var node = svg.selectAll(".node") 
    .data(data.nodes) 
    .enter() 
    .append("circle") 
    .style("fill", function(d) { 
     return d.extradata[0].type === "sometype" ? "#FF0000" : "#0000FF"; 
    }) 

的一點是，你已經可以訪問將d變量中的對象傳遞給該函數。

以下是使用數據屬性中的FDL和着色節點的example。還包括工具提示。