如何链接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。还包括工具提示。