D3 js - 线未在实时折线图中显示答案

【问题标题】：D3 js - line not showing in real time line graphD3 js - 线未在实时折线图中显示
【发布时间】：2018-03-12 17:35:29
【问题描述】：

我正在创建一个与蓝牙心率监测器配合使用的应用程序，我将使用 D3.js 实时绘制心率图。目前，我只是在创建一个简单的示例，稍后我可以对其进行调整以使用真实数据。

基本上我在这个阶段要做的就是在最后一分钟绘制随机生成的数据。数据读数是{timestamp: (the time which it was generated), hr:(num between 0 and 1)} 形式的虚拟读数数组。最初读数将为空，但每秒都会推送一个具有当前时间的新随机值。

由于某种原因，图表没有显示，但是我的代码中没有报告错误。 x 轴似乎是正确的并且过渡良好。任何建议或帮助将不胜感激。

我将发布我的整个代码，因为我不确定问题的根源。

    <!DOCTYPE html>
    <meta charset="utf-8">
    <style>
    
    .line {
      fill: none;
      stroke: blue;
      stroke-width: 2px;
    }
    
    </style>
    <svg width="600" height="400"></svg>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script>
    
    var n = 40,
        random = d3.randomUniform(0, 1),
        readings = [],
        currentReadings = [],
        duration = 1000,
        now = new Date(Date.now() - duration);
        startTime = new Date();
    
    var svg = d3.select("svg"),
        margin = {top: 20, right: 20, bottom: 20, left: 40},
        width = +svg.attr("width") - margin.left - margin.right,
        height = +svg.attr("height") - margin.top - margin.bottom,
        g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
    var xScale = d3.scaleTime()
        .domain([now - 60000, now])
        .range([0, width]);
    
    var yScale = d3.scaleLinear()
        .domain([0, 1])
        .range([height, 0]);
    
    var line = d3.line()
        .x(function(data) { return xScale(data.time); })
        .y(function(data) { return yScale(data.hr); })
        .curve(d3.curveBasis);
    
    g.append("defs").append("clipPath")
        .attr("id", "clip")
        .append("rect")
        .attr("width", width)
        .attr("height", height);
    
    var xAxisGroup = g.append("g")
        .attr("class", "axis axis--x")
        .attr("transform", "translate(0, " + height + ")")
        .call(xAxis = d3.axisBottom(xScale).
          ticks(3));
    
    var yAxisGroup = g.append("g")
        .attr("class", "axis axis--y")
        .call(d3.axisLeft(yScale));
    
    var path = g.append("g")
        .attr("clip-path", "url(#clip)")
        .append("path")
        .datum(currentReadings)
        .attr("class", "line")
        .transition()
        .duration(1000)
        .ease(d3.easeLinear)
        .on("start", tick);
    
    
    function tick() {

        now = new Date();
        
        // update the x axis domain and slide left
        xScale.domain([now - 60000, now]);
        xAxisGroup.call(xAxis);
        
        // generate new random reading
        reading = {time: new Date(), hr: random()};
    
        // Push the new reading onto readings and currentReadings
        readings.push(reading);
        currentReadings.push(reading);

        // Remove readings not within graph period
        for (var i=0; i<currentReadings.length; i++) {
          if (now - currentReadings[i].time > 60000)
            currentReadings.shift();
          else
            break;
        }
    
        // Redraw the line.
        d3.select(this)
            .datum(currentReadings)
            .attr("d", line)
            .attr("transform", null);
    
        // Slide it to the left.
        d3.active(this)
            .attr("transform", "translate(" + xScale(0) + ",0)")
            .transition()
            .duration(duration)
            .on("start", tick);
    
    }
    
    
    
    </script>

【问题讨论】：

标签： javascript d3.js graph line real-time

【解决方案1】：

关键问题是您对图表的翻译过多。它在绘画，只是在任何地方都看不到。为什么？

   d3.active(this)
        .attr("transform", "translate(" + xScale(0) + ",0)")
        .transition()
        .duration(duration)
        .on("start", tick);

您正在通过 xScale(0) 进行翻译，这是一个非常大的负数：

var now = new Date();

var xScale = d3.scaleTime()
  .domain([now - 60000, now])
  .range([0, 100]);
        
        
console.log(xScale(0));

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"&gt;&lt;/script&gt;

所以你永远不会看到你的图表，它在左边。相反，您可以通过坐标之间的 x 值差异进行转换（当您每秒更新一次，并在您的宽度上显示 60 个值时，可能是：width/60）。 如果输入点不一致，则需要通过输入点之间的宽度差进行平移，以便将图形滚动适当的量。

下面的 sn-p 显示了假设数据输入速率恒定的图表（我还对 x 轴应用了过渡，因此它滚动而不跳跃）：

<!DOCTYPE html>
    <meta charset="utf-8">
    <style>
    
    .line {
      fill: none;
      stroke: blue;
      stroke-width: 2px;
    }
    
    </style>
    <svg width="600" height="400"></svg>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script>
    
    var n = 40,
        random = d3.randomUniform(0, 1),
        readings = [],
        currentReadings = [],
        duration = 1000,
        now = new Date(Date.now() - duration);
        startTime = new Date();
    
    var svg = d3.select("svg"),
        margin = {top: 20, right: 20, bottom: 20, left: 40},
        width = +svg.attr("width") - margin.left - margin.right,
        height = +svg.attr("height") - margin.top - margin.bottom,
        g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
    var xScale = d3.scaleTime()
        .domain([now - 60000, now])
        .range([0, width]);
    
    var yScale = d3.scaleLinear()
        .domain([0, 1])
        .range([height, 0]);
    
    var line = d3.line()
        .x(function(data) { return xScale(data.time); })
        .y(function(data) { return yScale(data.hr); })
        .curve(d3.curveBasis);
    
    g.append("defs").append("clipPath")
        .attr("id", "clip")
        .append("rect")
        .attr("width", width)
        .attr("height", height);
    
    var xAxisGroup = g.append("g")
        .attr("class", "axis axis--x")
        .attr("transform", "translate(0, " + height + ")")
        .call(xAxis = d3.axisBottom(xScale).
          ticks(3));
    
    var yAxisGroup = g.append("g")
        .attr("class", "axis axis--y")
        .call(d3.axisLeft(yScale));
    
    var path = g.append("g")
        .attr("clip-path", "url(#clip)")
        .append("path")
        .datum(currentReadings)
        .attr("class", "line")
        .transition()
        .duration(1000)
        .ease(d3.easeLinear)
        .on("start", tick);
    
    
    function tick() {

        now = new Date();
        
        // update the x axis domain and slide left
        xScale.domain([now - 60000, now]);
        
       // transition the axis:
       xAxisGroup.transition().duration(1000).ease(d3.easeLinear).call(xAxis);
       
       // generate new random reading
        reading = {time: new Date(), hr: random()};
    
        // Push the new reading onto readings and currentReadings
        readings.push(reading);
        currentReadings.push(reading);

        // Remove readings not within graph period
        for (var i=0; i<currentReadings.length; i++) {
          if (now - currentReadings[i].time > 60000)
            currentReadings.shift();
          else
            break;
        }
    
        // Redraw the line.
        d3.select(this)
            .datum(currentReadings)
            .attr("d", line(currentReadings))
            .attr("transform", null);

        // Slide it to the left.
        d3.active(this)
            .attr("transform", "translate(" + -width/60 + ",0)") // transition based on distance between each data point.
            .transition()
            .duration(duration)
            .on("start", tick);
    
    }
    
    
    
    </script>

图表前导部分的跳跃是对缓动的影响，并在生成下一个点后对缓动进行修正

【讨论】：