从JSON获取数据到D3.js

Question

我尝试了d.bubbledata.values.value或d.bubbledata.values[0].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
    })