一般来说，当你写D3代码时，你通常不需要任何类型的循环。当然，我们有时会使用循环，但在非常特定的情况下，并解决非常特定的问题。
也就是说，只需绑定数据即可在输入选择中创建圆圈。这是“D3方式”，它将添加与数据数组长度一样多的圆圈：

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

这就是你所需要的删除for循环，这不仅不必要，而且会阻碍您的D3学习过程。
下面是一个演示（数据数组没有地理坐标，只有SVG坐标，但原理是一样的）：

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")

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

PS：你的代码，虽然不是最好的D3实践，但正在工作。你得到的错误仅仅是因为你在for循环中使用了<=，而你应该只使用<。看看你的代码，看看这个变化：

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")
};

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