Javascript 错误：<；路径>；属性d：预期的数字；MNaN、NaNLNaN、NaNL和x2026&引用；。在d3.js中_Javascript_Json_D3.js

Javascript 错误：<；路径>；属性d：预期的数字；MNaN、NaNLNaN、NaNL和x2026&引用；。在d3.js中

javascript json d3.js

Javascript 错误：<；路径>；属性d：预期的数字；MNaN、NaNLNaN、NaNL和x2026&引用；。在d3.js中,javascript,json,d3.js,Javascript,Json,D3.js,我正试图将我的地图放在d3.js的中心。我找到了这个代码,做了一点修改,我做不到。我得到了这个错误。我怎样才能修好它。我是javascript新手这是我的密码 <!DOCTYPE html> <meta charset="utf-8">  <style> path { stroke: red; stroke-width: 0.5px;

我正试图将我的地图放在d3.js的中心。我找到了这个代码,做了一点修改,我做不到。我得到了这个错误。我怎样才能修好它。我是javascript新手

这是我的密码

<!DOCTYPE html>
<meta charset="utf-8">

<!-- Set a style for our worldshape-data -->
<style>
  path {
    stroke: red;
    stroke-width: 0.5px;
    fill: steelblue;
  }
</style>

<body>

  <!-- implementation of the hosted D3- and TopoJson js-libraries -->
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="https://d3js.org/topojson.v0.min.js"></script>

  <!-- map creation -->
  <script>
    // canvas resolution
    var width = 1000,
      height = 600;

    // defines "svg" as data type and "make canvas" command
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);


    // shorten the svg.append command
    var g = svg.append("g");

    // load data and display the map on the canvas with country geometries
    d3.json("turkey.json", function(error, topology) {

      var projection = d3.geo.mercator().scale(1).translate([0, 0]).precision(0);
      var path = d3.geo.path().projection(projection);
      var bounds = path.bounds(topology);


      var scale = .95 / Math.max((bounds[1][0] - bounds[0][0]) / width,
        (bounds[1][1] - bounds[0][1]) / height);
      var transl = [(width - scale * (bounds[1][0] + bounds[0][0])) / 2,
        (height - scale * (bounds[1][1] + bounds[0][1])) / 2
      ];
      projection.scale(scale).translate(transl);

      g.selectAll("path")
        .data(topojson.object(topology, topology.objects.turkeytopo)
          .geometries)
        .enter()
        .append("path")
        .attr("d", path)
    });



    // zoom and pan functionality
    var zoom = d3.behavior.zoom()
      .on("zoom", function() {
        g.attr("transform", "translate(" +
          d3.event.translate.join(",") + ")scale(" + d3.event.scale + ")");
        g.selectAll("path")
          .attr("d", path.projection(projection));
      });

    svg.call(zoom)
  </script>
</body>

</html>

您没有正确使用

path.bounds

。从API文档

path.bounds

返回对象的投影平面边界框（通常以像素为单位）指定的GeoJSON对象。（）

这些组件使用GeoJSON格式，这是表示 JavaScript中的地理特征。（）

您正在传递path.bounds拓扑JSON对象，请尝试：

var bounds = path.bounds(topojson.feature(topology, topology.objects.turkeytopo));

也可以始终使用居中坐标，如拓扑中的bbox属性所示。投影将类似于：

var projection = d3.geo.mercator()
  .scale(2000)
  .center([34.5,38.5])
  .translate([width/2,height/2]);

缩放取决于svg大小

var projection = d3.geo.mercator()
  .scale(2000)
  .center([34.5,38.5])
  .translate([width/2,height/2]);