javascript - 从 JSON 获取数据到 D3.js

Question

我尝试了 d.bubbledata.values.value 或 d.bubbledata.values[0].value，但没有得到结果。

如何获得所有有值(value)的属性？

我的代码是:

var circles = svg.selectAll(".bubble")
        .data(json)
        .enter().append("circle")
        .attr("class","bubble")
        .attr("r", function(d) {
            return d.bubbledata.values[0].value;
        })

我的 json 是:

 {
          "categories": [
            "2003",
            "2004"
          ],
"bubbledata": {
    "values": [
      {
        "id": "346462",
        "name": "blabla1",
        "color": "#3a3790",
        "bordercolor": "#3a3790",
        "value": 0.82908,
        "label": 9.2942
      },
      {
        "id": "346131",
        "name": "blabla2",
        "color": "#ea772a",
        "bordercolor": "#ea772a",
        "value": 0.26954,
        "label": 3.0216
      }
 ]
}
}

Answer 1

这里的问题是传递给 data() 函数的数据。

在 D3 中，data() 接受三件事:

1. 数组
2. 一个函数
3. 没什么

因此，您无法像您现在所做的那样传递对象。您必须将数组传递给data:

var circles = svg.selectAll(".bubble")
    .data(json.bubbledata.values)//this is an array
    .enter().append("circle")
    .attr("class","bubble")
    .attr("r", function(d) {
        return d.value;//the "value" in each object
    })