Question

在下面创建了HTML表格，

<!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>

表中的内容是固定的。在d3.js中是否有任何方法可以自动化表中的内容。即该行动态地（自动播放）从1到3改变其位置; 2比1; 3比2等。更像是带有静态数据的D3动态表。在d3js中有更新，进入和退出的概念，如果有帮助就会帮助解决方案。

Answer 1

在d3中，有一个过渡的概念，这可能是你正在寻找的。这是指向该教程的链接。

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

以下是将背景颜色更改为红色的简单示例：

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

我自己没有尝试过，但我认为您可以使用此概念选择表格的特定行，并更改其中的值，或移动td标记。 jquery和d3的组合可能在这里工作。

来自HTML表的D3.js

1 个答案: