D3ツールチップの未定義属性

ツールチップに2つの属性を追加しようとしていますが、失敗しています。私は4つの属性のうち2つをツールチップに表示することができますが、すべてではありません。 "id"と "rate"は表示できますが、 "state"と "county"は表示できません。私はそれが間違ったデータの読み込みによると思うが、それを修正することはできません。手伝ってくれる？D3ツールチップの未定義属性

私はまた、私のデータの一部を最下部に記載しています。ここで

は私のコードです：

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

.counties { 
    fill: none; 
} 

.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 unemployment = d3.map(); 

var path = d3.geoPath(); 

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

var color = d3.scaleThreshold() 
    .domain([0, 1, 2, 4, 8, 10]) 
    .range(d3.schemeBlues[6]); 

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("x", x.range()[0] - 30) 
    .attr("y", -6) 
    .attr("fill", "#000") 
    .attr("text-anchor", "start") 
    .attr("font-weight", "bold") 
    .text("House Price to Income Ratio Rate"); 

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, "data.tsv", function(d) { unemployment.set(d.id, +d.rate, d.state, 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 = unemployment.get(d.id)); }) 
    .attr("d", path) 
    .append("title") 
    .text(function(d) { var q = d3.format(".2f") 
     return 'State:' + d.state + ' ' + d.county + ' ' +d.id + ':' +(q(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>

データ：

id rate state county 
47035 0.66 TN CUMBERLAND 
47089 1.26 TN JEFFERSON 
47129 1.08 TN MORGAN 
47155 1.34 TN SEVIER 
47105 1.16 TN LOUDON 
47145 1.1 TN ROANE 
47151 1.26 TN SCOTT 
47067 1.21 TN HANCOCK 
47173 1.03 TN UNION 
47063 1.22 TN HAMBLEN 
47033 1.17 TN CROCKETT 
47157 1.06 TN SHELBY 
47167 1.02 TN TIPTON 
47045 0.75 TN DYER 
47069 1.19 TN HARDEMAN 
47075 1.3 TN HAYWOOD 
47097 1.05 TN LAUDERDALE 
47047 1.38 TN FAYETTE 
47095 1.16 TN LAKE 
47017 1.11 TN CARROLL 
47005 1.19 TN BENTON 
47079 0.99 TN HENRY 
47183 1.06 TN WEAKLEY 
47131 1.1 TN OBION 
47053 1.13 TN GIBSON 
47113 1.26 TN MADISON 
47109 1.25 TN MCNAIRY 
47039 1.37 TN DECATUR 
47071 1.28 TN HARDIN 
47077 1.45 TN HENDERSON 
47023 1.21 TN CHESTER 
47181 1.34 TN WAYNE 
47055 1.16 TN GILES 
47099 1.31 TN LAWRENCE 
47101 1.32 TN LEWIS 
47141 1.45 TN PUTNAM 
47049 1.46 TN FENTRESS 
47133 1.2 TN OVERTON

出典

2017-06-19 Counter10000

あなたの問題はここに、あなたが各地理特徴のあるデータをアクセスしているという事実ではなく、TSVの行にあります：このfuncitonで

.text(function(d) { var q = d3.format(".2f") 
     return 'State:' + d.state + ' ' + d.county + ' ' +d.id + ':' +(q(d.rate)); } 
     );

dにGeoJSONから特徴データムが含まれています、

Object { type: "Feature", id: "18121", properties: Object, geometry: Object } 
Object { type: "Feature", id: "39103", properties: Object, geometry: Object }

データを適切にマップし、d3.map（）でアクセスする必要があります。あなたがthis exampleを使用しているように見えます、そして、あなたの変更が直感的に見えますが、この：このようなデータ構造で

.defer(d3.tsv, "data.tsv", function(d) { unemployment.set(d.id, +d.rate, d.state, d.county); })

結果：私はそのd3.mapを信じていません

Object { $47035: 0.66, $47089: 1.26, $47129: 1.08, $47155: 1.34, $47105: 1.16, $47145: 1.1, $47151: 1.26, $47067: 1.21, $47173: 1.03, $47063: 1.22, 28 more… }

（）。 set（）では、各キーに複数の値を設定できます。代わりに、値のオブジェクトを使用することができます。

.defer(d3.tsv, "data.tsv", function(d) { unemployment.set(d.id, d); })

は、TSVファイルの列にアクセスするには、その後のような行を使用します。

unemployment.get(d.id).state

最後に、それは可能性があります選択した郡だけを見ているかもしれませんが、データが存在するかどうかを確認するためのチェックを追加することもできます（それ以外の場合は、d3.map（）は一部の郡では未定義に戻ります）すべての郡のデータを検索します。このようなものが動作します：

.attr("fill", function(d) { if(unemployment.get(d.id)) { return color(d.rate = unemployment.get(d.id).rate); } else { return "none"; } }) 
.attr("d", path) 
.append("title") 
.text(function(d) { var q = d3.format(".2f"); 
    if (unemployment.get(d.id)) { 
      return 'State:' + unemployment.get(d.id).state + ' ' + unemployment.get(d.id).county + ' ' +d.id + ':' +(q(d.rate)); 
     } 
     else { 
      return "no data"; 
     } 
    });

Here's a block

上記のコードブロックでは、色を表示するときにd.rateが設定されていたため、後でテキストコンテンツを設定するときに失業マップを使用して値を設定する必要はありません。これは、あなたが作業していた可能性のある例でも、in this blockに当てはまりました。

出典

2017-06-19 05:42:12

D3ツールチップの未定義属性

答えて

関連する問題