1

我已经按照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 字符串以获取这些值，以及如何创建指向它们所属节点的链接。

4

1 回答 1

1

d3 的美妙之处在于 Javascript 对象本质上链接到代表它们的 DOM 对象。您甚至可以说数据驱动文档。

大概你有这样的事情：

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

也许您想根据datatypeJSON 中的第一个属性为每个节点着色：

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 和着色节点的示例。还包括工具提示。

于 2013-05-10T20:59:53.170 回答