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

Question

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

这可能是之前被问到的,但我希望我能得到一个特定于我遇到的问题的答案.我是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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

And*_*eid 5

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

d3.geo.albersUsa - > d3.geoAlbersUsa

d3.geo.albers - > d3.geoAlbers

等等

因此d3.geo将在v4中未定义,并且.albersUsa将找不到其属性并生成错误.

我不确定数据图是否已针对d3v4兼容性进行了升级,或者是否存在任何不兼容性可能导致的冲突.它可能更容易降级到d3v3.

归档时间：	8 年，7 月前
查看次数：	1602 次
最近记录：	8 年，7 月前