当我传入一组新数据时,我似乎无法在折线图之间获得动画过渡。我使用一组对象作为这样的数据:
[{ 点击次数: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")
}
我已尝试过能够传递新数据并在图形之间查看动画的所有内容。不确定我错过了什么?它是否与使用对象数组而不仅仅是数字的平面数组作为数据有关?