使用nvd3.js的动态图表

时间:2014-12-17 12:52:09

标签: d3.js nvd3.js

我想实现类似于http://bost.ocks.org/mike/nations/但使用nvd3.js的动态图表。我从nvd3.org获取了示例分散/气泡图,并为数据添加了一个额外的密钥。我使用此键作为动画的帧编号。你可以在这里找到它:http://jsfiddle.net/bartiosze/ny6vnznn/

我的想法是在.tween:

调用的函数中更改图表的数据
function drawFrame(idx) {
    var data = _.where(dataset, {
        index: idx
    });
    d3.select('#chart svg').datum(data)
      .transition().duration(100).call(window.chart.update);
}
function tweener() {
    var idx = d3.interpolateNumber(0, 9);
    return function (t) {
        drawFrame(Math.round(idx(t)));
    };
}

//should this work?
d3.select('#chart svg')
  .transition().duration(10000).ease("linear").tween(".nv-clip-points", tweener);

这可能是一个普遍的d3问题,但我错过了什么吗?

0 个答案:

没有答案