javascript - 访问 D3 直方图箱中对象的属性

Question

我正在开发一个 D3.js 项目，以显示从 CSV 文件中提取的一些学生测试结果的直方图。除了原始考试成绩外，我在 CSV 中还有一些关于每个学生的其他人口统计数据。我希望能够将鼠标悬停在直方图中的任何特定条形上，并显示有关该条形中代表的学生的一些摘要统计信息。

是否可以访问构成直方图条形的数组中包含的记录的其他属性？如果是这样，有人知道我可以检查的示例吗？

Answer 1

使用 histogram布局会抛出除用于创建直方图箱的标量之外的所有内容。

可能有更好的方法，但由于其他学生属性并未附加到每个栏，只需在原始学生数组中搜索分数在鼠标悬停箱中的学生:

.on('mouseover',function(d){ 
  console.log('data bound to bars ' + d); 
  var selectedStudents = values.filter(function(record){
            return d.x <= record.score && record.score < d.x + d.dx; });
  console.log(selectedStudents.map(function(record){ return record.name; }));
});

http://bl.ocks.org/1wheel/6568151

除了列出姓名外，selectedStudents 数组还可用于生成其他摘要统计信息。