Question

我使用过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/

我希望我的viz能够用4列的列进行更新。任何提示都赞赏。

Answer 1

有些事情可能会发生变化here is Mike Bostocks General Update Pattern。这是一个工作更新Fiddle的小提琴。更新模式中有4个重要步骤：

1）绑定新数据

2）删除不再需要的节点

3）将未删除的节点与新创建的节点合并

4）更新节点。

更改在更新功能中，更新版本如下。

我为创建的每一行使用void main() { char type; float x, y; vector <Force> force; ifstream file("ForceList.txt"); assure(file, "ForceList.txt"); while (file >> type >> x >> y) { Force f(type, x, y); force.push_back(f); //stores the class objects in a vector force } for (int i = 0; i < force.size(); ++i) { force[i].printforce(); //this just prints the vector }方法，以便更好地控制嵌套，而无需对数据对象进行任何修改。 .each方法使用相同的模式，仅在其自己的嵌套节点上使用。

.each

Answer 2

您需要使用旧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/

不了解嵌套数据中的d3 v4新常规更新模式

2 个答案: