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

09-11 14:53