时间序列折线图与轴不同步

Question

这个实验是基于这个d3官方的例子。我想要实现的是可视化最后x分钟的时间序列数据。我在这个文件夹里有一份代码副本。

问题是图表与坐标轴不同步。图表和坐标轴都在同一过渡点上平移

也许我走错了路，我想要达到的目标可以用一些最简单的方法来完成。请帮助。

最后是jsfiddle代码。

html:

<h1>Click to plot</h1>
<div id="chart"></div>

js:

var n = 200,
    duration = 150,
    count = 0,
    data = d3.range(n).map(function() { return 0; });
// canvas size
var margin = {top: 10, right: 10, bottom: 10, left: 10},
    width = 400,
    height = 200;
// input data model
var x = d3.time.scale();
var y = d3.scale.linear();
updateDomains(new Date() - duration);
var svgContainer = d3.select("#chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom);
// axis
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(6);
var xAxisG = svgContainer.append("g")
    .attr("class", "axis")
    .attr("transform", 
          "translate("+(margin.left)+"," + (height) + ")")
    .call(xAxis);
// the line chart
var line = d3.svg.line()
    .interpolate("linear")
    .x(function(d, i) { return x(new Date() - (n - 1 - i) * duration); })
    .y(function(d, i) { return y(d); });
var path = svgContainer.append("g")
    .attr("transform", 
          "translate("+(margin.left)+",0)")
    .attr("class", "path")
    .append("path")
    .data([data])
    .attr("class", "line");
tick();
d3.select(window)
    .on("click", function() { ++count; });
function tick() {
  // update the domains
  updateDomains(new Date());
  // push the accumulated count onto the back, and reset the count
  data.push(Math.min(30, count));
  count = 0;
  redrawLine();
  // pop the old data point off the front
  data.shift();
}
function redrawLine() {
  // redraw the line
  svgContainer.select(".line")
      .attr("d", line)
      .attr("transform", null);
  // slide the x-axis left
  xAxisG.transition()
      .duration(duration)
      .ease("linear")
      .call(xAxis);
  // slide the line left
  path.transition()
      .duration(duration)
      .ease("linear")
      .attr("transform", 
            "translate(" + x(new Date() - (n - 1) * duration) + ")")
      .each("end", tick);
}
function updateDomains(now) {
    x.domain([now - (n - 2) * duration, now - duration]);
    x.range([0, width]);
    y.range([height, 0]);
    y.domain([0, d3.max(data)]);
}

css:

body {
  font: 10px sans-serif;
}
#chart {
    border: 1px solid gray;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}
.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

Answer 1

实际上在你的代码中，我看到你正在使用新的日期()，它在函数执行时发生变化。轴的比例和绘图元素的比例都改变了。你能试着替换

下面的行吗?

updateDomains(new Date() - duration);

var currentDate = new Date();
updateDomains(currentDate - duration);

同样在tick函数中发送currentDate到displayDomains函数。当你想改变比例时，你可以改变变量currentDate。

希望有帮助。

Ganesh