CODEWITHSUNDEEP
d3.js
krishna_v
krishna_v

Reputation: 1511

d3.js - Row click event?

I have created a table and updated the data from csv using the function. The file to be read is passed as param.

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

I would like to have a functionality where if i click the first column, i can show another table with details of the row selected.

For e.g, I have populated the student details in the table. Once i click any row(student id), i need to show another table based on the student selected. How do we add on click in the table row?

Upvotes: 2

Views: 2573

Answers (1)

cyon
cyon

Reputation: 9548

You can use the tr selection's on method to attach a click event

For example 

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

Upvotes: 3

Related Questions