Question

我下载了这个文件：https://gist.github.com/markmarkoh/2969317

并尝试使用此代码：

<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
  stroke: white;
  stroke-width: 0.25px;
  fill: grey;
}
</style>
<body>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script src="gistfile1.js"></script>
<script>
var width = 960,
    height = 500;

var projection = d3.geo.mercator()
    .center([0, 5 ])
    .scale(900)
    .rotate([-180,0]);

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");

// load and display the World
d3.json("gistfile1.json", function(error, topology) {
    g.selectAll("path")
      .data(topojson.object(topology, topology.objects.countries)
          .geometries)
    .enter()
      .append("path")
      .attr("d", path)
});

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

但它不起作用。我是d3世界地图的新手，所以我有点迷茫。我尝试了一些教程，但我无法让它工作。有人可以帮助解释我的代码中的错误在哪里？我怎么能在地图上添加点？

Answer 1

您正在尝试加载json文件，但提供了一个js文件。

将gist文件从.js重命名为.json
删除var countries_data =部分。
加载gistfile1.json文件而不是json/world-110m2.json文件。

如何将这个JSON变成世界地图？

1 个答案: