我使用过D3的早期版本,而在v4上又回来了,但是我不太了解新的更新模式。我已经嵌套了数据,并且希望使用新的子节点更新可视化,这是一个最小的示例:
function update(data) {
var rows = d3
.selectAll("div")
.data(data)
.enter()
.append("div")
.classed("row", true)
var cells = rows
.selectAll("div")
.data(function(d) { return d })
cells
.enter()
.append("div")
.classed("cell", true)
.text(function(d) {return d})
}
var arr = [
[1, 2, 3],
[1, 2, 3],
[1, 2, 3]
]
var button = d3.select("body")
.append("button")
.text("update")
.on("click", modifyData);
function modifyData(){
arr.forEach(row => {
row.push(4)
});
update(arr);
}
update(arr);
https://jsfiddle.net/59qnhb8d/
我希望我的视角以4的列进行更新。任何提示表示赞赏。
最佳答案
您需要更新新的div并将其与旧的div合并:
function update(data) {
var rows = d3
.selectAll(".row")
.data(data)
rows.exit().remove();
var newRows = rows.enter()
.append("div")
.classed("row", true)
var cells = rows.merge(newRows) //here you tell it to merge new rows with existing rows
.selectAll(".cell")
.data(function(d) { console.log(d); return d })
cells.exit().remove();
var newCells = cells
.enter()
.append("div")
.classed("cell", true)
cells
.merge(newCells)
.text(function(d) {return d})
}
在这里提琴:https://jsfiddle.net/59qnhb8d/31/