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

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

选择不再使用原型链注入子类化Array;它们现在是普通物体，提高了性能。

因此，我相信你只想要价值：

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

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

PS ：就像在last question中一样，我必须告诉您：您现在正在做什么（使用d3.each，更不用说使用jQuery了......）不＆＃34; D3方式＆＃34;做你想做的事。将鼠标悬停在路径元素上时，您可以简单地获取绑定数据，如下所示：

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

Answer 2

.each忽略回调的返回值。它用于迭代选择的元素。

如果要访问绑定到特定元素的数据，可以使用.datum：

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

函数返回数字，但存储对象

2 个答案: