Question

我有一个由多对lat / lon坐标组成的数组，我想循环，使用d3将圆圈附加到数组中每个坐标对的地图上。

这是我到目前为止所做的：

import datetime
try:
    from itertools import ifilter
except ImportError:  # Python 3
    ifilter = filter

dates = [datetime.datetime(2016,5,1), datetime.datetime(2015,2,5)]

for date in ifilter(lambda d: d.year != 2015, dates):
    # do something with non-2015 date...
    print(date)  # -> 2016-05-01 00:00:00

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

Answer 1

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

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

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

这就是你所需要的。删除for循环，这不仅是不必要的，而且会妨碍您的D3学习过程。

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

＆＃13;

var aa = [[20, 37],[40, 61],[203, 77], [143, 107]];

var svg = d3.select("svg");

var circles = svg.selectAll("foo")
	.data(aa)
	.enter()
	.append("circle")
	
circles.attr("cx", d=>d[0])
	.attr("cy", d=>d[1])
	.attr("r", 5)
	.attr("fill", "teal")

＆＃13;

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

＆＃13;

PS ：您的代码虽然不是最好的D3练习，正在运作。您获得的错误仅仅是由于您在<=循环中使用for这一事实，而您应该只使用<。看看你的代码有这个改变：

＆＃13;

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

＆＃13;

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

＆＃13;

循环遍历数组以使用d3追加圆圈

1 个答案: