2017-03-16 3 views
2

이전에 물어 본 적이 있을지 모르겠지만 내가 만나는 문제에 대한 답변을 얻을 수 있기를 바랍니다. 저는 d3에 익숙하지 않습니다. 지금 당장은 위도를 그리려고 노력하고 있습니다. 첫 번째로 성공하면 나머지를 할 것입니다. 전문가의 도움을 감사하십시오. 감사.잡히지 않은 TypeError : 정의되지 않은 'albersUsa'속성을 읽을 수 없습니다.

특정 영역에 셀 사이트를 그려 봅니다. >d3.geoAlbersUsa

-

d3.geo.albersUsa : 당신이 d3.geoProjection를 사용하는 대신 d3.geo.projection의,

<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> 
+0

어떤 버전의 d3을 사용하고 있습니까? –

+0

다음은 d3.min.js - https://d3js.org 버전 4.7.3에 나와 있습니다. Copyright 2017 Mike Bostock. – DP8

답변

3

D3의 V4는 D3v3의 네임 스페이스를 변경 : 여기

코드입니다 d3.geo.albers -> d3.geoAlbers

등 c.

따라서 d3.geo은 v4에서 정의되지 않으며 해당 속성 .albersUsa은 발견되지 않으며 오류가 발생합니다.

d3v4 호환성을 위해 데이터 맵을 업그레이드했는지 또는 모든 비 호환성으로 인해 충돌이 발생할 수 있는지 확실하지 않습니다. d3v3으로 다운 그레이드하는 것이 더 쉬울 수도 있습니다.

+0

@AndrewReid, 감사합니다. 그것은 효과가 있었다. 또한 d3.geo.path와 동일한 문제가 있었으며 d3.geoPath로 작성했습니다. – DP8

관련 문제