Доступ к свойствам объектов в гистограммах 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 массив может быть использован для создания других сводных статистических данных, кроме списка от имен.

Answer 2

Вы можете отобразить всплывающую подсказку поверх гистограммы во время события mouseover. Идея состоит в том, чтобы сделать div float поверх области 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); 
})