我使用this example使用d3创建自己的实时图表。在我的版本中,图表使用现有数据进行初始化。问题是,x轴初始化导致图形的一小部分在最终显示正常比例并结果正常图形之前在右边转换或折叠时显示。我非常确定轴是否会引起它,因为轴恢复正常的那一刻也是如此。有没有办法在乞讨时消除这种转变,或者在图形准备好之前不会使图形偏斜或不显示?这是行动中的问题,比我试图解释它更好:http://codepen.io/Dordan/pen/NbBjPB/
以下是用于创建x轴的代码段:
var limit = 60 * 1;
var duration = 750;
var now = new Date(Date.now() - duration);
var x = d3.time.scale().domain([now - (limit - 2), now - duration]).range([0, width]);
var axis = svg.append('g')
.attr('class', 'x-axis')
.attr('transform', 'translate(0,' + height + ')')
.call(x.axis = d3.svg.axis().scale(x).orient('bottom'));
答案 0 :(得分:2)
在计算域时,x刻度的实例化缺少'* duration'。改为使用它,效果很好:
var x = d3.time.scale().domain([now - (limit - 2) * duration, now - duration]).range([0, width]);