Having trouble animating Line in D3.js using and array of objects as data

Posted by user1731245 on Stack Overflow See other posts from Stack Overflow or by user1731245
Published on 2012-10-09T09:28:19Z Indexed on 2012/10/09 9:37 UTC
Read the original article Hit count: 297

Filed under:
|
|

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?

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about svg