javascript - D3 和​​更新多维数组的元素

Question

假设我有一个名为 state 的二维数组，它看起来像 [[0,1,0],[1,1,0],[1,2,1] ]。这个数组的成员是不断更新的。我使用以下代码让 D3 成功渲染了数组的每个成员:

function view(state)
  const vis = d3.select('body')
                .selectAll('div')
                .data(state)
                .enter()
                  .append('div')
                  .attr('style', 'display: flex')
                  .selectAll('span')
                  .data((d,i) => d)
                  .enter()
                    .append('span')
                    .text(d => d)
  return vis
}

现在考虑一下每次我的state发生变化时都会调用这个view函数。如何让 D3 只重新渲染自上次渲染以来已更改的元素？目前，页面最初会呈现，但 D3 永远不会重新呈现任何元素，尽管在每次状态更改时都会调用 view 函数。

如果您想查看完整的源代码，我已将其发布 here

Answer 1

是的，要处理这种情况，您需要使用 enter 您正在执行的操作来创建新元素，并使用 exit 删除任何元素元素不在当前数组中。

我建议您这样做:

function view(state)
  var visData = d3.select('body')
                .selectAll('div')
                .data(state, function(d){/*uniquely identify each element in array*/return d;});

  const vis =  visData.enter()
                  .append('div')
                  .attr('style', 'display: flex')
                  .selectAll('span')
                  .data((d,i) => d)
                  .enter()
                    .append('span')
                    .text(d => d);
  //remove the unnecessary data divs.
  visData.exit().remove();

  return vis
}

进一步进入退出 read