Построение мест на карте мира с помощью d3.js - PullRequest
Новая
       22

Построение мест на карте мира с помощью d3.js

1 голос
/ 03 июня 2019

Я строю местоположения из большого файла cvs с приблизительно 181000 строками на карте мира с d3.js.Так как я новичок в d3, у меня возникли проблемы с проекциями.

Код, который я пробовал, приведен ниже. 

<!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>

Происходит следующее: я не могу заставить точки совпадать с точками на карте, и они просто объединяются и видныв верхнем углу карты.Я не могу понять, как это исправить.

...