Manipulate elements by binding new data

StackOverflow https://stackoverflow.com/questions/9518186

  •  14-11-2019
  •  | 
  •  

سؤال

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 first I have created four SVG circles, and set the cx offset as a function of the data:

 <body><div id="container"></div></body>

 var svg = d3.select("div.container").append("svg")
     .attr("class", "chart")
     .attr("width", 1000)
     .attr("height", 500);

  // Create initial data and display
  var data = [0, 10, 20, 30];
  var circle = svg.selectAll("circle")
      .data(data)
      .enter()
      .append('circle')
      .attr("cx", function(d) {
        return d*10;
      })
      .attr("cy", 100)
      .attr("r", 10)
      .style("fill", "steelblue");

Next I attach new data and a transition. I would expect to see the circles move slowly across to the new position (that's what I'm trying to achieve), but they don't: 

  var data1 = [40, 50, 60, 70];
  circle.data(data1).transition().duration(2500);

Am I making a basic error? Perhaps I have the wrong selection. Or is it simply not possible to update elements solely by manipulating data?

UPDATE: if I do console.log(circle) then I see an array of SVG circle elements, which is what I would expect.

هل كانت مفيدة؟

المحلول

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.

نصائح أخرى

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;
  });

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.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top