错误:<path>属性d:预期的数字,“MNaN,NaNLNaN,NaNL ......”。在d3.js

时间:2017-03-25 16:33:01

标签: javascript json d3.js

我想把我的地图放在d3.js中心。我找到了这个代码并且稍微改变了一点。我无法做到这一点。我收到了这个错误。我该如何解决呢?我是javascript的新手。

这是我的代码。

PolygonAndMarkerClickListener polygonAndMarkerClickListener = new PolygonAndMarkerClickListener();
        map.setOnPolygonClickListener(polygonAndMarkerClickListener);
        map.setOnMarkerClickListener(polygonAndMarkerClickListener);

这是我的json国家数据的一部分。

<!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>

1 个答案:

答案 0 :(得分:0)

您没有正确使用path.bounds。来自API文档path.bounds

  

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

     

这些组件使用GeoJSON格式 - 一种标准的表示方式   JavaScript中的地理特征。 (v3

您正在传递path.bounds topojson对象,请尝试:

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大小。