D3地图没有显示，尽管它在我的网络服务器上

D3 Map not showing despite having it on my web server

本文关键字：我的 网络 网络服务 服务器 地图 显示 D3      更新时间：2024-01-23

我一直在开发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>

我只收到一个空白页面，我的web检查器告诉我一个未捕获引用错误：拓扑未定义现在我需要澄清的地方是：我是否使用了正确的数据文件（json数据文件），可以为我提供特定国家的图纸？或者到目前为止，我的代码中缺少了什么？同样关于异常，考虑到我在Python HTTP服务器上工作，会发现什么异常？欢迎任何反馈

正如错误所说，您的代码中没有定义变量topology。在d3.json调用中，data应该是topology。因此，进行更改并重试（如下所示）：

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