Question

在我目前的项目中，我必须通过网络上的温度传感器显示实时温度数据。我们正在考虑以下列方式解决这个问题：

建议的解决方案：index.html文件（代码附在下方）将定期从data.tsv文件读取温度数据（每2-3秒）和温度传感器在data.tsv中附加生成的温度数据。因此，每次index.html文件都会显示更新的结果。

我有两个问题：

上面提出的解决方案是否正确？我们能有更好的解决方案/技术吗？随意提出其他方法/技术来解决这个问题。
如果上述解决方案正确无误，那么我如何才能定期阅读data.tsv档？

身体{ 字体：10px sans-serif; } .axis路径， .axis line { 填充：无; 中风：＃000; shape-rendering：crispEdges; }

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}
</style>
<body>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>

  var margin = {top:20, right: 20, bottom:30, left:50},
          width = 960 - margin.left - margin.right,
          height = 500 - margin.top - margin.bottom;

  var xColumn = "date"; 
    var yColumn = "temperature";      

  var parseDate = d3.time.format("%d-%b-%y").parse;


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


  var xAxis = d3.svg.axis().scale(x).orient("bottom");
  var yAxis = d3.svg.axis().scale(y).orient("left");

  var line = d3.svg.line()
              .x(function(d) { return x(d[xColumn]);})
              .y(function(d) { return y(d[yColumn]);});

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

  d3.tsv("data.tsv", function(error, data){
      if(error) throw error;

  data.forEach(function(d) {
      d[xColumn]= parseDate(d[xColumn]);
      d[yColumn] = +d[yColumn];
  });

  //Defining Min and max data
  x.domain(d3.extent(data, function(d){ return d[xColumn];}));
  y.domain(d3.extent(data, function(d){ return d[yColumn];}));

  svg.append("g")
      .attr("class","x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
          .append("text")
          .text("TimeStamp");     

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
          .append("text")
          .attr("transform", "rotate(-90)")
          .attr("y",6)
          .attr("dy", ".71em")
          .style("text-anchor","end")
          .text("Temperature");

  svg.append("path")
      .datum(data)
      .attr("class", "line")
      .attr("d", line);   
  }); 
</script>

Answer 1

根据您的解决方案的部署位置，您可能需要实施一个小型后端来为您的文件提供服务。理想情况下，我实现了一个带有套接字的节点后端，以便与客户端进行通信。推动而不是轮询。我建议的方法可行，但它并不是最优雅/最有效的方法，我要说。要轮询文件，一个简单的超时就可以了。同样，您在超时中放置的内容取决于您的解决方案的位置。

使用D3显示实时温度数据

1 个答案: