Question

我有此示例数据，并且说它在名为example.json的文件中：

{"Code":"ABC","Common Name":"Nashville, TN", location: {"latitude":36.166667,"longitude":-86.783333}},
{"Code":"DCE","Common Name":"NYC, NY",location: {"latitude":40.7127,"longitude":-74.0059}},
{"Code":"FGH","Common Name":"Philadelphia, PA", location: {"latitude":40.009376,"longitude":-75.133346}},
{"Code":"IJK","Common Name":"Austin, TX",location: {"latitude":30.307182,"longitude":-97.755996}}

我想将其添加到具有以下代码的地图中：

<!DOCTYPE html>
<html>
<body>
  <h2>Title</h2>
  <script src="https://d3js.org/d3.v3.js"></script>
  <script src="https://unpkg.com/topojson@3"></script>
  <script src="https://d3js.org/d3-geo.v1.min.js"></script>

  <script src="node_modules/datamaps/dist/datamaps.usa.js"></script>

  <div id="container" style="position: relative; width: 1000px; height: 500px;"</div>

   <script>

      var map = new Datamap({
          element: document.getElementById('container'),
          scope: 'usa'
        });

 </script>
</body>
</html>

我将如何附加json文件？我希望它读取location: {lat.., long}，并将鼠标悬停在该位置的Common Name上。

var svg = d3.select("body").append("svg").attr("width", 
width).attr("height", height);
    var path = d3.geo.path().projection(projection);
    var g = svg.append("g");

d3.json("example.json")function(error, topology) {
    g.selectAll("path").data(topojson.object(topology, topology.objects.countries).geometries).enter().append("path").attr("d", path)
});

我尝试过的所有操作都无法在地图上获取这些坐标，甚至不会附加我的json文件。而且我不知道如何正确设置.data()参数的格式。谢谢

d3：将JSON添加到美国地图

0 个答案: