javascript - 绘制多条实时线

Question

我想使用 JSON 文件绘制多条实时线。我基本上是从网站检索 JSON 文件，获取时间数据(以秒为单位的持续时间)，将它们转换为分钟并将它们推送到数据数组中。此代码每秒检查一次 JSON 文件。

我想添加尽可能多的行。例如，我想添加数据数组中元素的平均值(平均持续时间)并将其绘制在同一平面上。我试图添加另一个“线”和“路径”变量，但我无法同时绘制它。

数据数组是一个空数组，开头有 44 个元素，每次代码检查 JSON 文件时，它都会用检索到的持续时间数据替换这些零。

这是我只画一条线的代码。

  function graph() {

  var n = 43,
      duration = 1000,
      now = new Date(Date.now() - duration),
      count = 0,
      data = d3.range(n).map(function() { return 0; });

  var margin = {top: 10, right: 20, bottom: 30, left: 60},
      width = 1200 - margin.left-margin.right,
      height = 460 - margin.top - margin.bottom;

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

  var y = d3.scale.linear()
      .range([height, 0]);

  var line = d3.svg.line()
      .interpolate("basis")
      .x(function(d, i) { return x(now - (n - 1 - i) * duration); })
      .y(function(d, i) { return y(d); });

  var line2 = d3.svg.line()
      .interpolate("basis")
      .x(function(d, i) { return x(now - (n - 1 - i) * duration); })
      .y(function(d, i) { return y(d); });

  var svg = d3.select("body").append("p").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .style("margin-left", -margin.left + "px")
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  svg.append("defs").append("clipPath")
      .attr("id", "clip")
    .append("rect")
      .attr("width", width)
      .attr("height", height);

  var axis = svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate( "+margin.left+"," + height + ")")
      .call(x.axis = d3.svg.axis().scale(x).orient("bottom"));


  var yaxis = svg.append("g")
      .attr("class", "y axis")
      .attr("transform", "translate(" + margin.left + ",0)")
      .call(y.axis = d3.svg.axis().scale(y).orient("left"));


  d3.select(".y.axis")
      .append("text")
      .text("Travel Time (min)")
      .attr("text-anchor", "middle")
      .attr("transform","rotate( -90, 200, 0)")
      .attr("y",-250);

  var path = svg.append("g")
      .attr("clip-path", "url(#clip)")
      .attr("transform", "translate(" + margin.left + ",0)")
      .append("path")
      .data([data])
      .attr("class", "line");

  tick();

  function tick() {

    d3.json("route.json",function(barzo){
      var tempdata = barzo.route;
      var len = tempdata.realTime;
      var lastdata = parseInt(len)/60; //this is the time variable I use.

    // update the domains
    now = new Date();
    x.domain([now - (n - 2) * duration, now - duration]);
    y.domain([0, d3.max(data)+5]);

   // push the time into the data
    data.push(count);
    count = lastdata;

    // redraw the line
    svg.select(".line")
        .attr("d", line)
        .attr("transform", null);

    // slide the x-axis left
    axis.transition()
        .duration(duration)
        .ease("linear")
        .call(x.axis);

    yaxis.transition()
        .duration(duration/10)
        .ease("linear")
        .call(y.axis);

    // slide the line left
    path.transition()
        .duration(duration)
        .ease("linear")
        .attr("transform", "translate(" + x(now - (n - 1) * duration) + ")")
        .each("end", tick);


    // pop the old data point off the front
    data.shift();

  });
  }
  };

Answer 1

首先，我包含了另一个数据数组 (data2) 来推送新路径的新数据点:

 var n = 43,
      duration = 1000,
      now = new Date(Date.now() - duration),
      count = 0,
      data = d3.range(n).map(function() { return 0; });
      data2 = d3.range(n).map(function() { return 0; });

然后，我为使用 data2 数组的点的线定义了另一条路径。

var path2 = svg.append("g")
    .attr("clip-path", "url(#clip)")
    .attr("transform", "translate(" + margin.left + ",0)")  
    .append("path")
    .data([data2])
    .attr("class", "line2")

在 tick 函数中，我需要选择这两行来更新它们(您可以编写一个函数来为这些步骤做同样的事情，而不是重复相同的代码两次)。

  // redraw the line
  svg.select(".line")
      .attr("d", line)
      .attr("transform", null);

  svg.select(".line2")
      .attr("d", line2)
      .attr("transform", null);

过渡和数据转移也是一样

  // slide the line left
  path.transition()
      .duration(duration)
      .ease("linear")
      .attr("transform", "translate(" + x(now - (n - 1) * duration) + ")");

  path2.transition()
      .duration(duration)
      .ease("linear")
      .attr("transform", "translate(" + x(now - (n - 1) * duration) + ")")
      .each("end", tick);   

// pop the old data point off the front
  data.shift();
  data2.shift();