javascript - オブジェクトの配列をデータとして使用してD3.jsでLineをアニメーション化するのに問題があります

Question

新しいデータセットを渡すと、線グラフ間のアニメーション化された遷移を取得できないようです。私は次のようなデータとしてオブジェクトの配列を使用しています：

[{クリック数：40インストール：10回： "1349474400000"}、{クリック数：61インストール：3回： "1349478000000"}];

このコードを使用して範囲/軸を設定しています

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

新しいデータを渡し、グラフ間のアニメーションを表示できるようにするために、ほぼすべてを試しました。何が欠けているのかわかりませんか？単なる数値のフラット配列ではなく、オブジェクトの配列をデータとして使用することと関係がありますか？