score:3

Accepted answer

Short answer: no.

You don't have to re-join the whole dataset, specially if you have a huge data array and just one object has changed.

You can change the data array itself or change the datum in the D3 selection, it doesn't matter... what does matter is that changing the datum alone (using any of these methods) do not change the datavis, be it a SVG, a canvas or even a pure HTML datavis. For that, you need to update selection.

Here is a very simple demo, we have a huge array of 500 objects:

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

And, using that array, we build a set of divs.

Suppose that we change a single object:

data[100].prop = false;

The data has changed, but for the visualisation to change we have to change the selection (which is divs in the code). In the demo, the selection is updated after 1 second, the 100th div will turn red:

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>


Related Query

More Query from same tag