我有一个由多对纬度/经度坐标组成的数组,我想循环通过,使用d3为数组中的每个坐标对向Map添加圆。
以下是我到目前为止所做的:
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")
};
一个圆将绘制,但我得到一个错误消息,在控制台的第二个圆
1条答案
按热度按时间oxf4rvwz1#
一般来说,当你写D3代码时,你通常不需要任何类型的循环。当然,我们有时会使用循环,但在非常特定的情况下,并解决非常特定的问题。
也就是说,只需绑定数据即可在输入选择中创建圆圈。这是“D3方式”,它将添加与数据数组长度一样多的圆圈:
这就是你所需要的删除
for
循环,这不仅不必要,而且会阻碍您的D3学习过程。下面是一个演示(数据数组没有地理坐标,只有SVG坐标,但原理是一样的):
PS:你的代码,虽然不是最好的D3实践,但正在工作。你得到的错误仅仅是因为你在
for
循环中使用了<=
,而你应该只使用<
。看看你的代码,看看这个变化: