choropleth map returned undefined

私は米国郡のchoroplethマップを試しています。本質的にここのMike Bostockの例を使用していますhttps://bl.ocks.org/mbostock/4060606私は失業の代わりに教育を利用していますが、それ以外は同じです。私はそれにもう一つの作品を追加し、レートと一緒に郡名を表示したいと思います。しかし、私が郡名を呼ぶと、私は "undefined"を返します。明らかに 'レート'がうまく戻ってくるためには、 '郡'は未定義となります。誰も助けることができますか？ありがとう！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

あなたのコード内の2つの問題があります。

あなたのコードの最初の問題はここにある：（若干異なります）の両方javascript mapsとD3マップで

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

は、あなたが同じキーの二つの値を設定することはできません。そのため、構文がなければならない：

map.set（キー、値）

のは、それをお見せしましょう。

これは "foo" というの値 "bar" を設定し、動作します：

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>

ご覧のとおり、値 "baz"は設定されていません。

これは、Bachelor2.tsvファイル内ではcountryがプロパティであると仮定していました。そして、それは第二の問題に私たちをもたらします：あなたのパスで

、これはデータです：あなたはあなたのコードを見れば、あなたがそのデータに（あなたのマップを使用して）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と同じマップを使用して設定することはできません。解決策は、代わりにオブジェクトを使用しています。また、の2つのマップを使用することもできます。これは最速のオプションです。

出典

2017-10-01 10:00:13

Gerardoありがとうございます。私は2つの地図が最も簡単な選択肢かもしれないと思っていた。私は助けに感謝します！ –

choropleth map returned undefined

答えて

関連する問題