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

实际上在您的代码中，我看到您正在使用新的Date（），该函数在执行时会发生变化。因此，您的绘图元素的轴和比例尺会发生变化。你能尝试替换下面的行

吗？

updateDomains(new Date() - duration);

带

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

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

希望它有所帮助。

内甚

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

1 个答案: