初始化时删除d3轴过渡

Question

I am using this example to create my own real-time graph using d3. In my version the graph is initialized with existing data. Problem is, the x-axis initialization causes a very small portion of the graph to show while it is transitioning or collapsing on the right before finally showing the normal scale and resultantly the normal graph. I am pretty sure the axis is causing it because the moment the axis returns to normal so does the graph. Is there a way to remove this transition at the begging or otherwise have it not skew the graph or not show until it is ready? Here is the problem in action, better than me trying to explain it: http://codepen.io/Dordan/pen/NbBjPB/

Here is the code snippet for creating the x-axis:

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'));

Answer 1

The instantiation of your x scale is missing the '* duration' when you're calculating the domain. Use this instead and it works well:

var x = d3.time.scale().domain([now - (limit - 2) * duration, now - duration]).range([0, width]);