geoAlbersUSA Проекция не отображается должным образом - PullRequest
Новая
       23

geoAlbersUSA Проекция не отображается должным образом

0 голосов
/ 23 января 2019

У меня возникли некоторые проблемы с использованием проекции d3.geoAlbersUsa () для данного набора широт и долгот от здесь

У меня в основном весь код ниже, я чувствую, как будтоСуществует проблема с конкретной проекцией (широта, длина) на правильную проекцию.Странно, поскольку я следовал инструкциям пакета, который я использую для создания фактической карты (topojson-us-atlas)

Вот снимок документации с topojson-us-atlasпакет enter image description here

Вот как это выглядит сейчас:

misplaced park dots

Вот мой код:

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://unpkg.com/topojson-client@3"></script>
    
    <title>National Parks in GeoAlbersUSA Projection</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>

    body {
      font-family: Arial, Helvetica, sans-serif;
    }

    </style>
</head>
<body>




<header>
	<h1>World Map Visualization of National Parks</h1>
</header>


  <svg width="960" height="500" fill="none" stroke="#000" stroke-linejoin="round" stroke-linecap="round"></svg>

  <script>

    var svg = d3.select("svg");
    var path = d3.geoPath();    

    d3.json("https://unpkg.com/us-atlas@1/us/10m.json", function(error, us) {
      if (error) throw error;

      svg.append("path")
          .attr("stroke", "#aaa")
          .attr("stroke-width", 0.5)
          .attr("d", path(topojson.mesh(us, us.objects.counties, function(a, b) { return a !== b && (a.id / 1000 | 0) === (b.id / 1000 | 0); })));

      svg.append("path")
          .attr("stroke-width", 0.5)
          .attr("d", path(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })));

      svg.append("path")
          .attr("d", path(topojson.feature(us, us.objects.nation)));
    });

    d3.csv('https://raw.githubusercontent.com/codebrotherone/2days/master/data/locations.csv', function(d){
        var projection = d3.geoAlbersUsa();


        var circles = svg.selectAll("circle")
          .data(d)
          .enter()
          .append("circle")
          .attr("cx",function(d) {return parseFloat(projection([d.longitude, d.latitude]));
           })
          .attr("cy",function(d) { return parseFloat(projection([d.longitude, d.latitude])[1]);
           })
          .attr("r", 1)
          .attr("fill", 'red')

      });


  </script>


</body>
</html>

Кто-нибудь видит или замечает что-то неладное?

Заранее спасибо!

...