関数は数値を返しますが、オブジェクトは保存されます

Question

私は円グラフを作成するためにd3jsを使用しています。私は問題に遭遇しましたが、画面に数字を印刷することができませんでしたが、正常に戻るようになりました。ここで私が話してんだよ：

$('svg').on("mouseenter","path",function() { 
    var age = d3.select(this).each(function(d){return d.data.Life_Span}); 
    console.log(age) 
    d3.select('.moreinfo').text(age) 
}); 

d.data.Life_Spanは私が画面上に印刷するデータです。しかし、年齢には数字だけが格納され、オブジェクトは格納されません。内部関数内の変数にデータを格納しようとしましたが、これは機能しませんでした。この値を取得する簡単な方法はありますか？そこに簡単な解決策がありますように思えるが、私のコードは常にここで[object][object]

を出力し、完全なコードです：http://plnkr.co/edit/83Q8AFFgHama3LLpBI2C?p=preview

Answer 1

.eachは、コールバックの戻り値を無視します。これは、要素の選択を反復するために使用されます。

あなたが特定の要素にバインドされたデータにアクセスしたい場合は、.datumを使用することができます。

var age = d3.select(this).datum().data.Life_Span; 

Answer 2

あなたはD3選択にageを関連付けるしています。そして、新しいD3 v4.x以来、すべての選択はオブジェクトです：

選択はもはやサブクラスプロトタイプ連鎖注入を使用して配列。彼らは現在、単純なオブジェクトであり、パフォーマンスが向上しています。

したがって、私はあなただけの値をしたいと考えている：http://plnkr.co/edit/Wyc2x9HX6Ddh5nHjcjh5?p=preview

PS：ここ

var age; 
d3.select(this).each(function(d){age = d.data.Life_Span}); 
d3.select('.moreinfo').text(age); 

は、あなたの更新plunkerがあるだけで、あなたのlast questionのように、私はあなたに助言する必要があります。あなたは今何をしているのですか（d3.eachを使用して、jQueryを使用することは言うまでもありません...）ではなく、あなたが望むことをするための "D3方法"です。パス要素の上にマウスを移動するときには、単にこのように、結合したデータムを得ることができます：

d3.selectAll('path').on("mouseover",function(d) { 
    var age = d.data.Life_Span; 
    d3.select('.moreinfo').html(age) 
}); 

ここでは、対応するplunkerです：http://plnkr.co/edit/ouAPY6KLVenxXy83HKh9?p=preview