Javascript 在D3.js中使用对象和数组作为数据设置线条动画时遇到问题

当我传入一组新的数据时，我似乎无法在线条图之间进行动画转换。我使用对象数组作为数据，如下所示：

[{ 点击次数：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")
}