javascript - 即使一项中只有一项属性发生更改，我是否也必须重新加入整个数据集？

Question

我有一个相对较大的数据集(比如 10000+ 项)。 我已将此数据绑定(bind)到 D3 选择以生成项目视觉效果。

如果我在此数据集中的一项中仅更改了一个简单属性，则必须再次将整个相同的数据集重新加入到选择中。

container.selectAll(".item").data(dataset);

D3 中是否有任何 api 可以处理这个简单的更改，而不是重新加入整个相同的数据集？

Answer 1

简短回答:不。

您不必重新加入整个数据集，特别是当您有一个巨大的数据数组并且只有一个对象发生更改时。

您可以更改数据数组本身或更改 D3 选择中的数据，这并不重要...重要的是单独更改数据(使用这些方法中的任何一种)不会更改 datavis，而是它是一个 SVG、一个 Canvas ，甚至是一个纯 HTML 数据可视化。为此，您需要更新选择。

这是一个非常简单的演示，我们有一个包含 500 个对象的巨大数组:

const data = d3.range(500).map(function(d) {return {prop: true}});

并且，使用该数组，我们构建了一组 div。

假设我们更改单个对象:

data[100].prop = false;

数据已更改，但要更改可视化效果，我们必须更改选择(即代码中的 div)。在演示中，选区在 1 秒后更新，第 100 个 div 将变为红色:

const data = d3.range(500).map(function(d) {
  return {
    prop: true
  }
});
const body = d3.select("body");
const divs = body.selectAll(null)
  .data(data)
  .enter()
  .append("div")
  .style("background-color", "white");
  
 divs.transition()
  .delay(function(_, i) {
    return i
  })
  .style("background-color", function(d) {
    return d.prop ? "green" : "red"
  })

data[100].prop = false;

d3.timeout(function() {
  divs.style("background-color", function(d) {
    return d.prop ? "green" : "red"
  });
}, 1000)

div {
  width: 10px;
  height: 10px;
  float: left;
  margin: 1px;
}

<script src="https://d3js.org/d3.v5.min.js"></script>