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

Question

本实验基于this d3 official example 。我想要实现的是可视化时间序列数据的最后 x 分钟。我有这个jsfiddle中的代码副本。单击以添加新数据。

问题在于图表与轴不同步。图表和轴都通过相同的转换进行平移。

也许我的方式是错误的，而我想要实现的目标可以通过一些最简单的方式来完成。请帮忙。

最后是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

实际上，在您的代码中，我看到您正在使用 new Date() ，它在函数执行时会发生变化。因此您的轴比例和绘图元素比例会发生变化。 您可以尝试替换下面的行

updateDomains(new Date() - duration);

与

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

还在tick函数中将currentDate发送到displayDomains函数。 当您想更改比例时，您可以更改变量 currentDate。

希望有帮助。

甘尼许