Question

之前可能已经提出这个问题，但我希望我能得到一个特定于我遇到的问题的答案。我是d3的新手，我现在正试图绘制一个纬度/长度（当我第一次成功时，我将完成其余的工作）。感谢专家的任何帮助。感谢。

尝试在特定区域绘制单元格网站。

这是代码：

<head>
  <script src="https://maps.googleapis.com/maps/api/js"></script>
  <script src="d3.min.js"></script>
  <script src="http://d3js.org/topojson.v1.min.js"></script>
  <script src="datamaps.usa.min.js"></script>

<style>
  #map {
    height: 550px;
    width: 100%;
 }
</style>

</head>

<body>
 <div id="map"></div>
 <script>
    var map = new google.maps.Map(d3.select("#map").node(), {
      zoom: 8,
      center: new google.maps.LatLng(32.7830600, -96.8066700),
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  styles: [{
    "stylers": [{
      "saturation": -75
    }, {
      "lightness": 10
    }]
  }]
});


var places = [
  {
   name: "Site1",
   location: {
   latitude: 32.7935,
   longitude: -97.9619
   }
 }
]

var projection = d3.geo.albersUsa();


// add circles to svg
svg.selectAll("circle")
    .data(places)
    .enter().append("circle", "circle")
    .attr("r", 5)
    .attr("transform", function(d) {return "translate(" + projection([
        d.location.longitude, d.location.latitude ]) + ")";
  });



  </script>
</body>

</html>

Answer 1

D3 v4更改了D3v3的命名空间，而不是d3.geo.projection你使用了d3.geoProjection：

d3.geo.albersUsa - ＆gt; d3.geoAlbersUsa

d3.geo.albers - ＆gt; d3.geoAlbers

等

因此{4}将在v4中未定义，其属性d3.geo将无法找到并生成错误。

我不确定是否已针对d3v4兼容性升级了数据映射，或者是否存在任何不兼容性可能导致的冲突。可能更容易降级到d3v3。

未捕获的TypeError：无法读取未定义的属性'albersUsa'

1 个答案: