d3.js - Событие выбора строки?

Question

Я создал таблицу и обновил данные csv, используя эту функцию. Файл, который нужно прочитать, передается как параметр.

function displayContent(file){ 

d3.text(file, function(datasetText) { 
    parsedCSV = d3.csv.parseRows(datasetText); 
    var sampleHTML = d3.select("#TableContents") 
    .append("table") 
    .style("border", "2px black solid") 
    .attr("style", "margin-left: 20px") 
    .selectAll("tr") 
    .data(parsedCSV) 
    .enter().append("tr") 
    .selectAll("td") 
    .data(function(d){return d;}) 
    .enter().append("td") 
    .text(function(d){return d;}) 
    .style("font-size", "12px"); 
    }); 
} 

Я хотел бы иметь функциональные возможности, где, если я нажмите на первый столбец, я могу показать другую таблицу с подробной информацией о выбранной строке.

Например, я заполнил детали студента в таблице. Как только я нажму любую строку (идентификатор студента), мне нужно показать другую таблицу на основе выбранного студента. Как добавить клик в строке таблицы?

Answer 1

Вы можете использовать on метод в tr отбора, чтобы прикрепить событие щелчка

Например

.selectAll("tr") 
.data(parsedCSV) 
.enter().append("tr") 
    .on("click", function(d) { doSomething(); })