时间系列折线图不与轴同步 [英] Time series line chart is not sync with axis

问题描述

此实验基于此d3官方示例。我想实现的是可视化时间序列数据的最后x分钟。我有一份 jsfiddle 中的代码副本。点击以添加新数据。

This experiment is based on this d3 official example. What I'm trying to achieve is to visualise the last x minutes of a time series data. I have a copy of the code in this jsfiddle. Click to add a new data.

问题是图表与轴不同步。

The problem is that the chart is not in sync with the axis. Both the chart and the axis is translating by the same transition.

也许我在错误的方式，我想实现的可以在一些最简单的办法。请帮助。

Maybe I'm in the wrong way and what I'm trying to achieve can be done in some easiest way. Please help.

最后的jsfiddle代码。

In the end the jsfiddle code.

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;
}

推荐答案

看到你正在使用新的Date（），当函数执行时更改。因此您的用于绘制元素的轴和刻度的比例会更改。
您可以尝试替换以下行

Actually in your code, I see you are using new Date() which changes when the function is executing. so your scale for axis and scale for drawing elements gets changed. Can you try replaceing below line

updateDomains(new Date() - duration);

与

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

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

Also in tick function send currentDate to displayDomains function. when you want to change the scale you change variable currentDate.

希望它有帮助。

Ganesh

这篇关于时间系列折线图不与轴同步的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！