Manipulate elements by binding new data

Question

I am trying to work out how to update some D3.js elements just by binding new data. I\'m not actually sure if this is possible or not, but it feels like it should be.

So

Answer 1

A very good resource for adding new data to an existing visualization is the official tutorial on updating data.

http://bl.ocks.org/mbostock/3808221

The main takeaway is that you want to define a key function when you call data so that d3 can keep track of which data is new, vs which data is old.

Answer 2

Powerfully (but annoyingly) D3.js sometimes forces you to repeat yourself for simple visualizations. If you tell it that you want to create an element with attributes derived from the data in a certain way, and then later you want to transition those attributes to new data, you must tell it again how to derive the values (in case you wanted to do something different, such as a different visual layout). As @Andrew says, you must tell it what to do when it transitions.

You can work around this 'problem' by following this pattern:

var foo = d3.select('foo');
function redraw(someArray){
  var items = foo.selectAll('bar').data(someArray);
  items.enter().append('bar');
  items.exit().remove();
  items
    .attr('foo',function(d){ return d });
}

In 2.0 when you append() new items in enter() they are automatically added to the original data-bound selection, so the calls to attr() and whatnot later on will apply to them. This lets you use the same code for both setting initial values and updating values.

Since you don't want to re-create the SVG wrapper each update, you should create this outside the redraw function.

If you want to perform transitions:

function redraw(someArray){
  var items = foo.selectAll('bar').data(someArray);
  items.enter().append('bar')
    .attr('opacity',0)
    .attr('foo',initialPreAnimationValue);
  items.exit().transition().duration(500)
    .attr('opacity',0)
    .remove();
  items.transition.duration(500)
    .attr('opacity',1)
    .attr('foo',function(d){ return d });
}

Note that the above associates objects with data by index. If you want deleting an intermediary data point to fade out that data point before removing it (instead of removing the last item and transforming every other item to look like that one) then you should specify a unique (non-index) string value to associate each item with:

var data = [
  {id:1, c:'red',   x:150},
  {id:3, c:'#3cf',  x:127},
  {id:2, c:'green', x:240},
  {id:4, c:'red',   x:340}
];
myItems.data(data,function(d){ return d.id; });

You can see an example of this and play with it live on my D3.js playground.

First, see what happens when you comment out one of the data lines, and then put it back again. Next, remove the parameter ƒ('id') from the call to data() on line 4 and again try commenting out and in data lines.

Edit: Alternatively, as commented by the illustrious mbostock, you can use selection.call() along with a reusable function as a way to DRY up your code:

var foo = d3.select('foo');
function redraw(someArray){
  var items = foo.selectAll('bar').data(someArray);
  items.enter().append('bar').call(setEmAll);
  items.exit().remove();
  items.call(setEmAll);
}

function setEmAll(myItems){
  myItems
    .attr('foo',function(d){ return d*2 })
    .attr('bar',function(d){ return Math.sqrt(d)+17 });
}

As shown above, .call() invokes a function and passes along the selection as an argument, so that you can perform the same setup on your selection in multiple locations.

Answer 3

OK, now I've got it! You need to tell it WHAT to transition:

circle.data(data1).transition().duration(2500).attr("cx", function(d) {
      return d*10;
  });