logo标签列表

D3.js从HTML表格开始

javascripthtmldomd3.js
4
下面已经创建了一个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中有更新、输入和退出的概念，如果可以帮助解决问题，请帮忙提供。
1个回答
1
在d3中，有一个叫做“transition”的概念，这可能是你正在寻找的。这里有一个关于它的教程链接。

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

这里是一个简单的示例，将背景颜色更改为红色：

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

我自己没有尝试过，但我认为您可以使用此概念来选择表格中的特定行，然后更改其中的值或移动td标签。在这里，jquery和d3的组合可能有效。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接