javascript - 如何在 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[] 数组的一些值。最终结果如下图所示，其中蓝色圆圈代表额外数据的内容(例如 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 变量中的对象。

这是一个example使用数据属性中的 FDL 和着色节点。还包括工具提示。