如何在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属性的每个节点的extradata[]数组的一些值。最终结果类似于下图，其中蓝色圆圈表示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。还包括工具提示。