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数组还可用于生成其他摘要统计信息。

Answer 2

您可以在鼠标悬停事件期间在条形图顶部显示工具提示。我们的想法是在svg区域顶部进行div浮动。您可以在工具提示中显示各种信息。见这里的例子：

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);
})

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

2 个答案: