Question

我试图制作加泰罗尼亚Maresme region的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>

结果是一个巨大的灰色框，充满了奇怪的文物（但是出现了城市的名字）。我从SHP转换了topojson，它在QGIS中看起来是正确的。

我不确定是否由墨卡托投影引起的错误。我跟着Swiss Cantons example（虽然用mercator投影而不是albers）但我无法弄清楚为什么不工作（我已经试图集中并缩放地图，它没有＆＃39;改变太多了。）

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

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

有什么想法吗？谢谢！

简单地图无法正常工作，显示工件

0 个答案: