我正在尝试使用 nvd3.js 创建一个实时图表,该图表将定期更新,并且给人的印象是数据是实时处理的。
现在我已经能够创建一个可以定期更新图表的函数,但我无法在“状态”之间进行平滑转换,比如向左转换的线。
这是我使用 nvd3.js 所做的,这里有趣的代码是:
d3.select('#chart svg')
.datum(data)
.transition().duration(duration)
.call(chart);
现在,我已经能够使用 d3.js 生成我想要的东西,但我希望能够使用 nvd3.js 提供的所有工具。这是我想使用 nvd3 制作的内容
使用 d3.js 进行转换的有趣代码是:
function tick() {
// update the domains
now = new Date();
x.domain([now - (n - 2) * duration, now - duration]);
y.domain([0, d3.max(data)]);
// push the accumulated count onto the back, and reset the count
data.push(Math.random()*10);
count = 0;
// redraw the line
svg.select(".line")
.attr("d", line)
.attr("transform", null);
// slide the x-axis left
axis.transition()
.duration(duration)
.ease("linear")
.call(x.axis);
// slide the line left
path.transition()
.duration(duration)
.ease("linear")
.attr("transform", "translate(" + x(now - (n - 1) * duration) + ")")
.each("end", tick);
// pop the old data point off the front
data.shift();
}