Question

我正在使用d3.js在世界地图上绘制约181000行的大型cvs文件中的位置。由于我是d3的新手，因此im的投影有些麻烦。

我尝试过的代码如下。

<!DOCTYPE html>
<meta charset="utf-8">
<style>svg{width:100%;height:500px;margin:0px auto;}</style>
<body>
<script src="https://unpkg.com/d3@4"></script>
<script src="https://unpkg.com/topojson-client@3"></script>
<script>

var svg = d3.select("body").append("svg");
var path = d3.geoPath().projection(d3.geoMercator());
d3.json("https://unpkg.com/world-atlas@1/world/110m.json", function(error, world) {
  if (error) throw error;
  svg.selectAll("path")
     .data(topojson.feature(world,world.objects.countries).features)
     .enter().append("path")
     .attr("d", path);
});

d3.csv("vis.csv", function(error, data){
  if (error) throw error;
    svg.selectAll("circle")
    .data(data).enter()
    .append("circle")
    .attr("cx", function (data) { return data.latitude })
    .attr("cy", function (data) { return data.longitude })
    .attr("r", 5)
    .attr('fill', function (d) { return "blue" })
    .attr('stroke','yellow')
})


</script>

正在发生的事情是我无法获得与地图上的点重合的位置，并且它们会聚在一起并且在地图的顶端角处可见。我不知道如何解决这个问题。

使用d3.js在世界地图上绘制位置

0 个答案: