1

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

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

4

2 回答 2

1

您可以在鼠标悬停事件期间在条形图顶部显示工具提示。这个想法是让一个 div 浮动在 svg 区域的顶部。您可以在工具提示中显示各种信息。请参见此处的示例：

http://vida.io/documents/F3Ehr3qqeK28P22wn

这是显示/隐藏工具提示的代码块：

on("mouseover", function(d) {
    var bar_width = parseInt($(this).attr("width"), 10);
    var x = parseInt($(this).attr("x"), 10) + bar_width / 2 + 5;
    var y = parseInt($(this).attr("y"), 10) - 20;
    div.transition().duration(200).style("opacity", 1);
    // include info you want to display here:
    div.html(d[X_AXIS_COLUMN] + "<br/>" + Y_DATA_FORMAT(d[Y_AXIS_COLUMN])).style("left", x + "px").style("top", y + "px");
}).on("mouseout", function(d) {
    div.transition().duration(500).style("opacity", 0);
})
于 2013-09-19T22:34:16.107 回答
1

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

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

.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 数组除了列出姓名外，还可用于生成其他汇总统计信息。

于 2013-09-15T06:00:41.910 回答