Question

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

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

由于某种原因，图表没有显示，但我的代码中没有报告错误。 x轴看起来是正确的并且转换得很好。任何建议或帮助将不胜感激。

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

＆＃13;

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

＆＃13;

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 - 未在实时线图

1 个答案: