D3：迭代和访问数据集？

上下文D3：迭代和访问数据集？

我正在做散点图。对于每个位置，在我的数据集中，我想使用'lat'和'long'值在地图上绘制一个圆。会有两个圆圈绘制，一个在另一个之上。这两个圆的半径将由'total'和'passed'值定义。我制作了我的地图;我打算绘制我的数据是这个样子：

我可以构建我的数据的任何方式，我想。下面我已经选择了json。

[ 
    { 
    "year": 2006, 
    "inspections": [ 
     { 
     "location": "Cheshire", 
     "total": 341, 
     "passed": 26, 
     "long": 5, 
     "lat": 20 
     }, 
     { 
     "location": "County Durham", 
     "total": 102, 
     "passed": 1, 
     "long": 480, 
     "lat": 90 
     } 
    ] 
    }, 
    { 
    "year": 2007, 
    ... 
]

最后，我想转为我的社交圈（让他们增长和收缩）经过多年，但现在我已经开始简单，只是想绘制数据的一个单一的一年对我的地图。

这里是我的代码第一次尝试绘制我的圈子：

d3.json("dataset", function(error, data) { 
    svg.selectAll("circle") 
    .data(data) 
    .enter() 
    .append("circle") 
    .attr("cx", function(d) { 
    // return someting; 
    }) 
    .attr("cy", function(d) { 
    // return someting; 
    }) 
    .attr("r", 5); 
});

这里是d控制台输出：

问题

我不我太了解如何.data()和.enter()工作？我如何访问我的值，'位置'，'全部'，'通过'，'长'和'拉特'，以便我可以绘制2006年的所有圈子。可用示例倾向于使用非常简单的数组。如何从我更复杂的嵌套数组和对象结构中获取我的值？

来源

2015-12-26 24ma13wg

如果你的JSON数据是这样的

var json = [{ 
     "year": 2006, 
     "inspections": [{ 
     "location": "Cheshire", 
     "total": 341, 
     "passed": 26, 
     "long": 50, 
     "lat": 0 
     }, { 
     "location": "County Durham", 
     "total": 102, 
     "passed": 10, 
     "long": 52, 
     "lat": 0 
     }] 
    }, { 
     "year": 2007, 
     "inspections": [{ 
     "location": "Cheshire", 
     "total": 341, 
     "passed": 26, 
     "long": 51, 
     "lat": 1 
     }, { 
     "location": "County Durham", 
     "total": 102, 
     "passed": 10, 
     "long": 51, 
     "lat": -1.8 
     }] 
    } 
    ];

首先要红圈视察的第一阵列是这样的：

//circle1 
svg.selectAll(".red")//get all the circles with class red 
    .data(json).enter()//iterate over the json 
    .append("circle") 
    .attr("cx", function (d) { var circle1 = d.inspections[0]; return projection([circle1.lat,circle1.long])[0]; })//get x point based on projection set the x point which is 0 index 
    .attr("cy", function (d) { var circle1 = d.inspections[0]; return projection([circle1.lat,circle1.long])[1]; })//get x point based on projection set the x point which is 1 index 
    .attr("r", "8") 
    .attr("class", "red")//to get the selection for red circles 
    .attr("fill", "red")

让蓝色圆圈像这样的检查的第二阵列：

//circle 2 
svg.selectAll(".blue") 
    .data(json).enter() 
    .append("circle") 
    .attr("cx", function (d) { var circle1 = d.inspections[1]; return projection([circle1.lat,circle1.long])[0]; }) 
    .attr("cy", function (d) { var circle1 = d.inspections[1]; return projection([circle1.lat,circle1.long])[1]; }) 
    .attr("r", "8") 
    .attr("class", "blue") 
    .attr("fill", "blue")

工作代码here

希望这有助于！

来源

2015-12-26 14:32:53 Cyril

容易只是有对象的平面数组，如果可以的话：

[ 
    { 
    "year": 2006, 
    "location": "Cheshire", 
    "total": 341, 
    "passed": 26, 
    "long": 5, 
    "lat": 20 
    }, 
    { 
    "year": 2006, 
    "location": "County Durham", 
    "total": 102, 
    "passed": 1, 
    "long": 480, 
    "lat": 90 
    } 
]

然后d.lat等将返回你所期望的。否则，你的代码乍看起来很不错。只需执行两次你的svg.selectAll("circle").data(data).enter().append("circle")--每组圈子一次。

来源

2015-12-27 04:28:54

D3：迭代和访问数据集？

回答

相关问题