CODEWITHSUNDEEP
javascripthtmldomd3.js
user3222242
user3222242

Reputation: 129

D3.js from HTML table

Have created HTML table below, 

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left;
}
table#t01 {
    width: 100%;    
    background-color: #f1f1c1;
}
</style>
</head>
<body>

<table style="width:100%">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>

The contents in the table are fixed. Is there any way in d3.js to automate the contents within the table. i.e the row changes its position dynamically(autoplay) from 1 to 3; 2 to 1 ; 3 to 2 etc . More like D3 dynamic table with static data. There is concept of update, enter and exit in d3js, will that help to arrive at the solution if so please help.

Upvotes: 4

Views: 292

Answers (1)

Johnny Yeo
Johnny Yeo

Reputation: 123

In d3, there's a concept of a transition, which is probably what you're looking for. Here's a link to a tutorial on that.

https://bost.ocks.org/mike/transition/

Here is a simple example of changing the background color to red:

d3.select("body")
  .transition()
  .style("background-color", "red");

I haven't tried it myself, but I think you can use this concept for selecting specific rows of the table, and either changing the values in it, or move the td tags around. A combination of jquery and d3 might work here.

Upvotes: 1

Related Questions