Having trouble animating Line in D3.js using and array of objects as data
- by user1731245
I can't seem to get an animated transition between line graphs when I pass in a new set of data. I am using an array of objects as data like this:
[{
clicks: 40
installs: 10
time: "1349474400000"
},{
clicks: 61
installs: 3
time: "1349478000000"
}];
I am using this code to setup my ranges / axis's
var xRange = d3.time.scale().range([0, w]),
yRange = d3.scale.linear().range([h , 0]),
xAxis = d3.svg.axis().scale(xRange).tickSize(-h).ticks(6).tickSubdivide(false),
yAxis = d3.svg.axis().scale(yRange).ticks(5).tickSize(-w).orient("left");
var clicksLine = d3.svg.line()
.interpolate("cardinal")
.x(function(d){return xRange(d.time)})
.y(function(d){return yRange(d.clicks)});
var clickPath;
function drawGraphs(data) {
clickPath = svg.append("g")
.append("path")
.data([data])
.attr("class", "clicks")
.attr("d", clicksLine);
}
function updateGraphs(data) {
svg.select('path.clicks')
.data([data])
.attr("d", clicksLine)
.transition()
.duration(500)
.ease("linear")
}
I have tried just about everything to be able to pass in new data and see an animation between graph's. Not sure what I am missing? does it have something to do with using an array of objects instead of just a flat array of numbers as data?
