javascript - 函数返回数字，但对象被存储

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 是我要在屏幕上打印的数据。但是，年龄不存储数字，只是一个对象。我尝试将数据存储在内部函数内的一个变量中，但这没有用。有没有简单的方法来获得这个值(value)？似乎有一个简单的解决方案，但我的代码总是打印出 [object][object]

完整代码如下:http://plnkr.co/edit/83Q8AFFgHama3LLpBI2C?p=preview

Answer 1

您正在将 age 与 D3 选择相关联。而且，自新的 D3 v4.x 以来，所有选择都是对象:

Selections no longer subclass Array using prototype chain injection; they are now plain objects, improving performance.

因此，我相信您只需要值:

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

这是您更新的插件:http://plnkr.co/edit/Wyc2x9HX6Ddh5nHjcjh5?p=preview

PS:就像你的last question一样，我必须建议您:您现在正在做的事情(使用 d3.each，更不用说使用 jQuery...)不是“D3 方式”做你想做的事。将鼠标悬停在路径元素上时，您可以简单地获取绑定(bind)数据，如下所示:

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

这是相应的插件:http://plnkr.co/edit/ouAPY6KLVenxXy83HKh9?p=preview