Question

我一直在研究d3 JavaScript库，我试图想出一个可以在我的html上的svg标签上呈现的地图。这就是我到目前为止所做的：

<!DOCTYPE html>
<html>
    <head>
        <title>D3 Map</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="js/vendor/jquery.min.js"></script>
        <script src="js/d3.min.js"></script>
        <script src="http://d3js.org/topojson.v1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js"></script>
    </head>
    <body>
        <svg width="1000" height="1300">

        </svg>
        <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("kenya.geojson", function(error, data) {
    g.selectAll("path")
      .data(topojson.object(topology, topology.objects.countries)
          .geometries)
    .enter()
      .append("path")
      .attr("d", path)
});

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

我只有一个空白页面，我的网络检查员告诉我未捕获的ReferenceError：拓扑没有定义现在我需要澄清一下：我使用的是正确的数据文件（json数据文件），它会为我提供特定国家/地区的图纸吗？或者到目前为止，我的代码中缺少了什么？另外，关于异常，鉴于我正在使用Python HTTP服务器，可能会遇到什么异常？欢迎任何反馈

Answer 1

如错误所述，您的代码中未定义变量topology。在您的d3.json通话中，data应为topology。所以进行更改并再次尝试（如下）：

`d3.json("geojson", function(error, topology) {
   g.selectAll("path")
    .data(topojson.object(topology, topology.objects.countries)
      .geometries)
    ...
  });

D3 Map虽然在我的网络服务器上显示，但没有显示

1 个答案: