D3.js 简单映射无法正常工作，显示工件_D3.js_Topojson

D3.js 简单映射无法正常工作，显示工件

d3.js

D3.js 简单映射无法正常工作，显示工件,d3.js,topojson,D3.js,Topojson,我正在尝试制作加泰罗尼亚的d3地图，但我无法让它正常工作这是我的密码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0"/> <title>El Maresme</title> <

我正在尝试制作加泰罗尼亚的d3地图，但我无法让它正常工作

这是我的密码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0"/>
  <title>El Maresme</title>
  <script src="d3.min.js"></script>
  <script src="topojson.js"></script>
  <style type="text/css">
  .maresme {
  fill: #bbb;
  }

  text {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 10px;
    text-anchor: middle;
  }
  </style>
</head>
<body>
  <script type="text/javascript">
  var width = 960,
      height = 800;

  var projection = d3.geo.mercator()
    .translate([width / 2, height / 2]);

  var path = d3.geo.path()
    .projection(projection);

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

  d3.json("maresme.json", function(error, mun) {
    var maresme = topojson.feature(mun, mun.objects.maresme);

    svg.append("path")
      .datum(maresme)
      .attr("class", "maresme")
      .attr("d", path);

    svg.selectAll("text")
        .data(maresme.features)
      .enter().append("text")
        .attr("transform", function (d) {return "translate(" + path.centroid(d) + ")";})
        .attr("dy", "0.35em")
        .text(function(d) {return d.properties.NOM_MUNI;});
    });
  </script>
</body>
</html>

有什么想法吗？谢谢

你能把maresme.json发到什么地方吗？当出现奇怪的工件时，通常是因为json不在WGS-84坐标系中。这是正常的GPS坐标-因此对于西班牙的Maresme，通过topojson.feature转换后，您应该会看到类似于[2.58,41.5]的坐标值。如果您看到奇怪的值，例如高于180，则需要转到QGIS并通过选定的CRS保存SHP，然后选择WGS-84谢谢！这是地图

  var projection = d3.geo.mercator()
    .translate([width / 2, height / 2]);

  var path = d3.geo.path()
    .projection(projection);