d3.js在地图上绘制人口

时间:2017-11-30 22:46:02

标签: javascript csv d3.js

所以我正在开发一个d3.js项目,我用一个圆圈在地图上绘制各个国家的人口,并且圆圈的大小根据数量(显然)而增加。我有一个.csv文件,其中包含每个国家的经度和纬度以及人口。这是我的代码:

UPDATE 当调用console.log(pop_data)时,它会将population的值作为字符串返回,这可能是问题吗?如果是这样我该如何解决这个问题。

d3.csv("data/population.csv", function(pop_data) {
                            console.log(pop_data);

                            svg.selectAll("circle")
                                .data(pop_data)
                                .enter()
                                .append("circle")
                                .attr("cx", function(d){
                                    return projection([d.longitude, d.latitude])[0];
                                })
                                .attr("cy", function(d) {
                                    return projection([d.longitude, d.latitude])[1];
                                })
                                .attr("r", function(d) {
                                    return Math.sqrt(parseInt(d.populations) * 10);
                                })
                                .style("fill", "black")
                                .style("stroke", "grey")
                                .style("stroke-width", 0.25)
                                .style("opacity", 0.75);
                    });

但由于某种原因,它会返回此错误:

d3.js:1382错误:属性r:预期长度,“NaN”。

任何人都有任何关于为什么会这样做的建议?在我的csv文件中,经度被称为经度,纬度被称为纬度,种群被称为种群。

0 个答案:

没有答案