Menu
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.
306
Data binding in concept is quite simple. On one side, you have a data model and on the other side, you have an interface, often called a view. The idea is that you want to “bind” some piece of data to something on the view so that when the data changes, the view changes. This is typical for read-only data.
To create a two-way data binding, we will create an object's property with a getter and a setter function. Mainly the setter function of the object to update the value of the corresponding HTML element. We will be using Object. defineProperty to define the getter and setter for an object's property.
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.
156
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
