用D3创建一个表

Question

我正试图在D3中创建一个用新数据更新的表。这基本上是有效的。

不知怎么的，我在新添加的行中没有得到任何列(所以最初表是空的(。

我做错了什么？

请参阅：https://jsfiddle.net/yev4kujn/21/

var rows = tableBody.selectAll("tr").data(data);
rows.exit().remove();
rows.enter().append("tr");
var cells = rows.selectAll("td")
.data(function(d, i) {
return Object.values(d);
});
cells.exit().remove();
cells.enter().append("td")
.text(function(d) {
return d;
});
cells.text(function(d) {
return d;
});

Answer 1

在D3中，选择是不可变的。因此，当你这样做的时候。。。

rows.enter().append("tr")

您没有改变rows是什么：它一直是更新的选择，当函数第一次运行时，它是空的。所以，当你来到…

var cells = rows.selectAll("td")

没有CCD_ 2s来附加CCD_ 3s。

话虽如此，你必须改变rows是什么：

rows = rows.enter().append("tr").merge(rows);

现在rows包含输入的元素。

这是您更改后的代码：

var data1 = [{
"name": "Steve",
"age": "34"
},
{
"name": "Brian",
"age": "44"
},
{
"name": "Amy",
"age": "45"
}
];
var data2 = [{
"name": "Jennifer",
"age": "54",
"adult": "no"
},
{
"name": "Mike",
"age": "14",
"flowers": "yes"
}
];
var toggle = true;
function update() {
if (toggle) {
updateTable(data1);
} else {
updateTable(data2);
}
toggle = !toggle;
}

var tableBody = d3.select("#tableBody");
update();
function updateTable(data) {
var rows = tableBody.selectAll("tr").data(data);
rows.exit().remove();
rows = rows.enter().append("tr").merge(rows);
var cells = rows.selectAll("td")
.data(function(d, i) {
return Object.values(d);
});
cells.exit().remove();
cells.enter().append("td")
.text(function(d) {
return d;
});
cells.text(function(d) {
return d;
});
}

td {
border: 2px solid green;
}
th {
border: 2px solid red;
}
tr {
border: 2px solid blue;
display: block;
padding: 3px;
margin: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<p>
This button toggles between two datasets:
</p>
<button onclick="update()">
Toggle
</button>
<table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
</thead>
<tbody id="tableBody">
</tbody>
</table>