choropleth map returned undefined

나는 미국 카운티의 choropleth지도를 시도하고 있으며, 여기에서 Mike Bostock의 예를 본질적으로 사용하고 있습니다. https://bl.ocks.org/mbostock/4060606 저는 실업 대신 교육을 사용하고 있지만 그렇지 않으면 동일합니다. 나는 그것에 단지 하나의 조각을 더하고, 비율과 함께 군 이름을 표시하도록시키고 싶다. 그러나 카운티 이름을 호출하면 "undefined"가 반환됩니다. 명확한 'rate'가 반환되면 'county'가 정의되지 않은 것으로 나타납니다. 누구든지 도와 줄 수 있습니까? 감사!choropleth map returned undefined

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

 
.counties { 
 
    fill: none; 
 
    /*stroke: black;*/ 
 
} 
 

 
.states { 
 
    fill: none; 
 
    stroke: #fff; 
 
    stroke-linejoin: round; 
 
} 
 

 
</style> 
 
<svg width="960" height="600"></svg> 
 
<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> 
 
<script src="https://d3js.org/topojson.v2.min.js"></script> 
 
<script> 
 

 
var svg = d3.select("svg"), 
 
    width = +svg.attr("width"), 
 
    height = +svg.attr("height"); 
 

 
var Bachelor = d3.map(); 
 

 
var path = d3.geoPath(); 
 

 
var x = d3.scaleLinear() 
 
    .domain([0, 70]) 
 
    .rangeRound([600, 860]); 
 

 
var color_domain = [10, 20, 30, 40, 50, 60, 70] 
 
var ext_color_domain = [10, 20, 30, 40, 50, 60, 70] 
 
var color = d3.scaleThreshold() 
 
    .domain(color_domain) 
 
    .range([" #85c1e9", "#5dade2", "#3498db", "#2e86c1", "#2874a6", " #21618c"," #1b4f72"]); 
 
var g = svg.append("g") 
 
    .attr("class", "key") 
 
    .attr("transform", "translate(0,40)"); 
 

 
g.selectAll("rect") 
 
    .data(color.range().map(function(d) { 
 
     d = color.invertExtent(d); 
 
     if (d[0] == null) d[0] = x.domain()[0]; 
 
     if (d[1] == null) d[1] = x.domain()[1]; 
 
     return d; 
 
    })) 
 
    .enter().append("rect") 
 
    .attr("height", 8) 
 
    .attr("x", function(d) { return x(d[0]); }) 
 
    .attr("width", function(d) { return x(d[1]) - x(d[0]); }) 
 
    .attr("fill", function(d) { return color(d[0]); }); 
 

 
g.append("text") 
 
    .attr("class", "caption") 
 
    .attr("x", x.range()[0]) 
 
    .attr("y", -6) 
 
    .attr("fill", "#000") 
 
    .attr("text-anchor", "start") 
 
    .attr("font-weight", "bold") 
 
    .text("% of Adults with Bachelor's or higher"); 
 

 
g.call(d3.axisBottom(x) 
 
    .tickSize(13) 
 
    .tickFormat(function(x, i) { return i ? x : x; }) 
 
    .tickValues(color.domain())) 
 
    .select(".domain") 
 
    .remove(); 
 

 
d3.queue() 
 
    .defer(d3.json, "https://d3js.org/us-10m.v1.json") 
 
    .defer(d3.tsv, "Bachelor2.tsv", function(d) { Bachelor.set(d.id, d.rate, d.county); }) 
 
    .await(ready); 
 

 

 
function ready(error, us) { 
 
    if (error) throw error; 
 

 

 
    svg.append("g") 
 
     .attr("class", "counties") 
 
    .selectAll("path") 
 
    .data(topojson.feature(us, us.objects.counties).features) 
 
    .enter().append("path") 
 
     .attr("fill", function(d) { return color(d.rate = Bachelor.get(d.id)); }) 
 
     .attr("d", path) 
 
    .append("title") 
 
     .text(function(d) { return (d.county +" " d.rate +"%"); }); 
 

 
    svg.append("path") 
 
     .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })) 
 
     .attr("class", "states") 
 
     .attr("d", path); 
 
} 
 

 
</script>

출처

2017-10-01 Matthew Ingle

지도 데이터 [us-10m.v1.json] (https://d3js.org/us-10m.v1.json)에 체크 표시가있는 경우 국가 이름이 없음을 알 수 있습니다. 따라서 다른지도 데이터를 변경하는 것이 좋습니다. – 1Cr18Ni9

@ 1Cr18Ni9 원래 코드는 맵을 사용하여 'rate'을 설정합니다. OP는 같은지도를 사용하여 '국가'를 설정하려했습니다. –

@ 제라르도 맞습니다! – 1Cr18Ni9

코드에서 두 가지 문제가 있습니다.

코드의 첫 번째 문제는 여기에있다 : (약간 다릅니다) 모두 javascript maps 및 D3지도에서

Bachelor.set(d.id, d.rate, d.county);

, 당신은 같은 키에 대한 두 값을 설정할 수 없습니다. 따라서, 구문 수 있습니다

map.set (키, 값)

의 그것을 보여 드리죠.

var myMap = d3.map(); 
 
myMap.set("foo", "bar"); 
 
console.log(myMap.get("foo"))

<script src="https://d3js.org/d3.v4.min.js"></script>

그러나

, 이것은 작동하지 않습니다 :

var myMap = d3.map(); 
 
myMap.set("foo", "bar", "baz"); 
 
console.log(myMap.get("foo"))

<script src="https://d3js.org/d3.v4.min.js"></script>

이는 "바"에서 "foo는"값을 설정, 작동

보시다시피, "baz"값이 설정되지 않았습니다.

그 country은 Bachelor2.tsv 파일의 속성이라고 가정합니다. 그리고 그 두 번째 문제로 우리에게 가져다 : 당신의 경로에서

,이 데이터입니다 : 당신은 당신의 코드를 보면, 해당 데이터 (지도를 사용) rate라는 이름의 속성을 설정

topojson.feature(us, us.objects.counties).features

...

.attr("fill", function(d) { return color(d.rate = Bachelor.get(d.id)); }) 
//you set 'rate' to the datum here --------^

...하지만 결코 country 속성을 설정하지 않았습니다. 따라서 콜백에서 사용할 수있는 속성은 없습니다.

위에서 설명한 것처럼 rate을 설정하는 데 사용한 맵과 동일한 맵을 사용하여 설정할 수 없습니다. 솔루션은 대신 객체를 사용합니다. 또는 두 개의지도를 사용할 수 있습니다 (가장 빠른 옵션 인 것 같습니다).

출처

2017-10-01 10:00:13

감사합니다. Gerardo. 두 개의지도가 가장 간단한 옵션인지 궁금합니다. 도움에 감사드립니다! –

답변

관련 문제