使用 d3 循环数组以附加圆圈

Question

我有一个由多对纬度/经度坐标组成的数组，我想循环遍历它，使用 d3 将圆附加到数组中每个坐标对的地图上。

这是我到目前为止所拥有的：

var aa = [[-122.490402, 37.786453],[-149.882154, 61.138793]];
console.log(aa[0]);
console.log(aa[1]);

var breweryCircles = [];
for (i=0;i<=aa.length;i++) {
    breweryCircles.push(aa[i]);


    g.selectAll("circle")
        .data(breweryCircles)
        .enter()
        .append('circle')
        .attr("cx", function (d) { return projection(breweryCircles)[0]; })
        .attr("cy", function (d) { return projection(breweryCircles)[1]; })
        .attr("r", "2px")
        .attr("fill", "red")            
};

将绘制一个圆圈，但我在控制台中收到第二个圆圈的错误消息

Answer 1

作为一般规则，当您编写 D3 代码时，通常不需要任何类型的循环。当然，我们有时会使用循环，但只是在非常具体的情况下并解决非常具体的问题。

话虽这么说，只需绑定数据即可在输入选择中创建圈子。这是“D3 方式”，它将附加与数据数组长度一样多的圆圈：

var circles = svg.selectAll(null)
    .data(aa)
    .enter()
    .append("circle")

这就是您所需要的。放弃这个for循环，这不仅是不必要的，而且还会阻碍你的 D3 学习过程。

这是一个演示（数据数组没有地理坐标，只有SVG坐标，但原理是一样的）：

var circles = svg.selectAll(null)
    .data(aa)
    .enter()
    .append("circle")

var aa = [[20, 37],[40, 61],[203, 77], [143, 107]];

var svg = d3.select("svg");

var circles = svg.selectAll(null)
    .data(aa)
    .enter()
    .append("circle")
    
circles.attr("cx", d=>d[0])
    .attr("cy", d=>d[1])
    .attr("r", 5)
    .attr("fill", "teal")

PS：您的代码虽然不是最好的 D3 实践，但正在运行。<=您收到的错误仅仅是由于您在循环中使用的事实for，而您应该只使用<. 看看你的代码做了这样的改变：

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

var aa = [[20, 37],[40, 61],[203, 77], [143, 107]];

var svg = d3.select("svg");

var breweryCircles = [];
for (i = 0; i < aa.length; i++) {
//use < here--^
    breweryCircles.push(aa[i]);

    svg.selectAll("circle")
        .data(breweryCircles)
        .enter()
        .append('circle')
        .attr("cx", function(d) {
            return d[0];
        })
        .attr("cy", function(d) {
            return d[1];
        })
        .attr("r", 5)
        .attr("fill", "red")
};