D3 js - 线不显示在实时折线图中

Question

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

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

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

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

    <!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>

Answer 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));

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>

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

下面的代码片段显示了假设数据输入速率恒定的情况下的图表（我还在 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>

图表前导部分的跳动是对下一个点生成后的缓动和缓动的修正

D3 js - 线不显示在实时折线图中

D3 js - line not showing in real time line graph

javascript

graph

real-time

line

d3.js