javascript - 如何在 Javascript 和 D3.js 折线图中通过 stomp.js 绘制来自 Web 套接字消息的实时数据？-6ren

javascript - 如何在 Javascript 和 D3.js 折线图中通过 stomp.js 绘制来自 Web 套接字消息的实时数据？

转载作者：行者123 更新时间：2023-11-28 15:07:49

使用 Javascript，我需要调用 Web 套接字(使用 stomp.js ...)，并在 D3.js 折线图上绘制实时数据。

这是我的实际代码...

<!DOCTYPE HTML>
<html>
 <head>
   <title>Client Stomp 1</title>

   <style>
    body { font: 12px Arial;}

    path {
        stroke: steelblue;
        stroke-width: 2;
        fill: none;
    }

    .axis path,
    .axis line {
        fill: none;
        stroke: grey;
        stroke-width: 1;
        shape-rendering: crispEdges;
    }
   </style>

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

   <!-- *** D3.js library inclusion ... *** -->
   <script src="http://d3js.org/d3.v3.min.js"></script>
 </head>
 <body>
   <script>
       var urlServer;
       var topics;

       // *** Service variable to interrupt te values visualization ...
       var i = 0;

       // *** The vector that will mantain the couple values  data - temperatura that there will be plotted in the line graph ...
       var dataLineGraph = [];

       // *** Setting the server and topic parameters ...
       urlServer = "ws://stream.smartdatanet.it/ws";
       topics = "/topic/output.arpa_rumore.4c5d7481-fa5e-4f2f-d26d-d4e8095b9dd2_s_01";

       // *** Create the stomp client and estabilish the connection ...
       // *** username and password are public
       client = Stomp.client(urlServer);
       client.connect("guest" , "Aekieh6F" , connectCallBack, errorCallback);

       plotLineGraph (dataLineGraph);

       // *** Manage the connection ...
       function connectCallBack(x) {
           client.subscribe(topics, messageCallback);
           if (i < 1) {alert("Make the connection !")}
           i = i + 1;
       }

       // *** Manage the connection error...
       function errorCallback(x) {
           if (i < 1) {alert("Connection error !")}
           i = i + 1;
       }

       // *** Manage the message callback...
      function messageCallback(x) {
           if (i < 5) {
             alert("First messages sent form the platform! To see the others open the web browser console !!!");

             // *** Convert the body message in JSON format ...
             var theJson = JSON.parse(x.body);

             // *** Alert the time and the b_6300_Hz value ...
             //alert(theJson.values[0].time + " - " + theJson.values[0].components.b_6300_Hz);

             // *** Alert the time and the b_6300_Hz value ...
             time = theJson.values[0].time;

             // *** Hardcoded but it's only to test the date parsing ...
             day = time.substring(8,10);
             //alert ("Day = " + day);
             month = time.substring(5,7);
             //alert ("month = " + month);
             year = time.substring(0,4);
             //alert ("Year = " + year);
             hour = time.substring(11,13);
             //alert ("Hour = " + hour);
             minutes = time.substring(14,16);
             //alert ("Minutes = " + minutes);
             seconds = time.substring(17,19);
             //alert ("Seconds= " + seconds);

//             formattedDate = (dt.getMonth() + 1) + "/" + dt.getDate() + "/" + dt.getFullYear() + "-" + (dt.getHours()) + ":" + dt.getMinutes() + ":" + dt.getSeconds();
             formattedDate = month + "/" + day + "/" + year + "-" + hour + ":" + minutes + ":" + seconds;

             value = theJson.values[0].components.b_6300_Hz;

//             2016-07-01T15:18:31+0200 - 50.2
             alert ("formattedDate = " + formattedDate);

             dataLineGraph.push({time: formattedDate, value:value});
           }

           i = i + 1;
      }




      // *** Function for to draw the line graph ...
      function plotLineGraph (data) {
          // Set the dimensions of the canvas / graph
          var margin = {top: 30, right: 20, bottom: 30, left: 50},
              width = 600 - margin.left - margin.right,
              height = 270 - margin.top - margin.bottom;

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

          // Define the axes
          var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(5);
          var yAxis = d3.svg.axis().scale(y).orient("left").ticks(5);

          // Define the line
          var valueline = d3.svg.line()
              .x(function(d) { return x(d.date); })
              .y(function(d) { return y(d.close); });

          // Adds the svg canvas
          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 + ")");

          // Parse the date / time
          var parseDate = d3.time.format("%d/%m/%Y-%H:%M:%S").parse;

          // Get the data
      //    d3.csv("data.csv", function(error, data) {

              data.forEach(function(d) {
                  d.date = parseDate(d.time);
                  d.close = +d.value;
              });

              // Scale the range of the data
              x.domain(d3.extent(data, function(d) { return d.date; }));
              y.domain([0, d3.max(data, function(d) { return d.value; })]);

              // Add the valueline path.
              svg.append("path")
                  .attr("class", "line")
                  .attr("d", valueline(data));

              // Add the X Axis
              svg.append("g")
                  .attr("class", "x axis")
                  .attr("transform", "translate(0," + height + ")")
                  .call(xAxis);

              // Add the Y Axis
              svg.append("g")
                  .attr("class", "y axis")
                  .call(yAxis);

      //    });

      }


     </script>
 </body>
</html>

您可以复制/粘贴并尝试执行(...应该可以工作...)。

我能够使用流中的消息，正如您从警报或观看网络浏览器控制台中看到的那样，但我不知道如何将这些信息放在像这样的动态线图上 http://jsfiddle.net/peDzT/ .

如何将数据添加到折线图上的 dataLineGraph 数组中，以及如何在矢量中添加每个新数据时刷新它？

请注意，如果我将plotLineGraph 函数与加载一次的“静态”数据一起使用，它就会起作用。

任何建议/示例将不胜感激!!!

凯撒

最佳答案

我已经清理并重构了您的代码，以便向您展示示例实现。在其中，我绘制了时间与 b_400_Hz 的关系，因为我不确定您在寻找哪个信号。我已经对下面的代码进行了很好的注释，并且它是可以运行的，所以如果您有任何问题，请询问:

<!DOCTYPE HTML>
<html>

<head>
  <title>Client Stomp 1</title>

  <style>
    body {
      font: 12px Arial;
    }
    
    path {
      stroke: steelblue;
      stroke-width: 2;
      fill: none;
    }
    
    .axis path,
    .axis line {
      fill: none;
      stroke: grey;
      stroke-width: 1;
      shape-rendering: crispEdges;
    }
  </style>

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

  <!-- *** D3.js library inclusion ... *** -->
  <script src="https://d3js.org/d3.v3.min.js"></script>
</head>

<body>
  <script>
    var urlServer;
    var topics;

    // *** The vector that will mantain the couple values  data - temperatura that there will be plotted in the line graph ...
    var dataLineGraph = [];

    // *** Setting the server and topic parameters ...
    urlServer = "ws://stream.smartdatanet.it/ws";
    topics = "/topic/output.arpa_rumore.4c5d7481-fa5e-4f2f-d26d-d4e8095b9dd2_s_01";

    // *** Create the stomp client and estabilish the connection ...
    // *** username and password are public
    client = Stomp.client(urlServer);
    client.connect("guest", "Aekieh6F", connectCallBack, function(){});

    // *** Manage the connection ...
    function connectCallBack(x) {
      client.subscribe(topics, messageCallback);
    }
    
    function compare(a,b) {
      if (a.time < b.time)
        return -1;
      if (a.time > b.time)
        return 1;
      return 0;
    }

    // parse the times from the server
    var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%S%Z").parse;
    
    // *** Manage the message callback...
    function messageCallback(x) {

      // *** Convert the body message in JSON format ...
      var theJson = JSON.parse(x.body);

      // grab the values of interest
      dataLineGraph.push({
        time: parseDate(theJson.values[0].time),
        value: +theJson.values[0].components.b_400_Hz
      });
      
      // make sure we stay sorted
      dataLineGraph.sort(compare);
      
      plotLineGraph();
    }

    // intial graph setup
    setupGraph();

    // keep reference to these variables from setupGraph
    var valueline, x, y, xAxisG, yAxisG, line;
    
    function setupGraph() {
      // Set the dimensions of the canvas / graph
      var margin = {
          top: 30,
          right: 20,
          bottom: 30,
          left: 50
        },
        width = 600 - margin.left - margin.right,
        height = 270 - margin.top - margin.bottom;

      // Set the ranges
      x = d3.time.scale().range([0, width]);
      y = d3.scale.linear().range([height, 0]);

      // Define the line
      valueline = d3.svg.line()
        .x(function(d) {
          console.log(d)
          return x(d.time);
        })
        .y(function(d) {
          return y(d.value);
        });

      // Adds the svg canvas
      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 + ")");

      // Add the X Axis
      xAxisG = svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")");

      // Add the Y Axis
      yAxisG = svg.append("g")
        .attr("class", "y axis");

      line = svg.append("path");
    }


    // *** Function for to draw the line graph ...
    function plotLineGraph() {

      // Scale the range of the data
      x.domain(d3.extent(dataLineGraph, function(d) {
        return d.time;
      }));
      y.domain([0, d3.max(dataLineGraph, function(d) {
        return d.value;
      })]);
 
      // transistion axis
      xAxisG
        .transition()
        .duration(500)
        .ease("linear")
        .call(d3.svg.axis().scale(x).orient("bottom"));
        
      yAxisG
        .transition()
        .duration(500)
        .ease("linear")
        .call(d3.svg.axis().scale(y).orient("left"));

      // change the line
      line.transition()
        .duration(500)
        .attr("d", valueline(dataLineGraph));
    }
  </script>
</body>

</html>

关于javascript - 如何在 Javascript 和 D3.js 折线图中通过 stomp.js 绘制来自 Web 套接字消息的实时数据？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38149971/

文章推荐： html - 显示 :inline-block not working outlook/gmail

文章推荐： ios - 如何在 iOS Swift 中使用 Watson Conversation？

文章推荐： swift - 使用 RxSwift 刷新下一页

文章推荐： javascript - jQuery 点击事件不起作用

支持移动点的iOS库(折线图)
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
【matplotlib实战】--折线图
折线图是一种用于可视化数据变化趋势的图表，它可以用于表示任何数值随着时间或类别的变化。折线图由折线段和折线交点组成，折线段表示数值随时间或类别的变化趋势，折线交点表示数据的转折点。折
typescript 折线图 d3
我是 d3 和 typescript 的新手。我正在尝试使用 d3 v4 和 typescript 创建一个简单的折线图。但是，我收到了一个 typescript 错误，如下图所示: 问题是什么？
Qlikview 折线图，在时间段维度上具有多个表达式
我是 Qlikview 的新手，经过几次失败的尝试后，我不得不请求一些有关 Qlikview 中图表的指导。我想创建折线图，其中包含: 一维 - 一个月的时间段按天数分割一个表达式 - 每天创建的任
java - Android 折线图
我正在尝试使用 Firebase 实时数据库中的数据在 Android 中制作折线图。这是数据库的结构: enter image description here 这是代码: public clas
sql - SSRS基于相同数据类型的多条线 - 折线图
我有一个 TSQL 查询，它提供了一些性能基线的一个月数据。我用折线图显示数据。现在我想在报告中添加更多参数，以提供从两个不同月份选择数据的选项，并将其显示在同一个折线图中以进行比较。我不知道如何开始
R 折线图 - 删除与数据无关的令人烦恼的零线
我有一个简单(但非常大)的数据集，其中包含从 4 月到 8 月在不同站点进行的计数。在 4 月中旬和 7 月之间，没有零计数 - 但零线从最早到最晚的日期延伸。以下是用于制作上述图表的部分数据(列
c# - 折线图 - 更改边框宽度会删除空间
我正在创建一个折线图，我想在不改变线条长度的情况下增加线条的高度或厚度。在增加宽度属性之前，它看起来像这样: 增加宽度属性后，它看起来像这样: 我只想增加 height，但是没有这样的属性，所以我尝
具有值的 JavaFX 折线图
我想在折线图的顶部显示值。我看过this answer这很有帮助，但它改变了折线图节点。我想要的是相同的想法，但不在节点上显示值，而是在它们附近(可能在它们的右侧和上方)显示值，例如:
php - MYSQL转Google图表(折线图)
我正在尝试使用谷歌图表以折线图的形式显示mysql数据。我认为问题出在我尝试格式化谷歌图表数据的部分。我的代码有什么问题吗？ $sth = mysql_query("SELECT * FROM rea
JavaFX CSS 折线图
我有 JavaFX LineChart 和一些带有 XYChart.Series 对象的数据 XYChart.Series series = new XYChart.Series(); series.
python - 模式匹配或比较两个图形(折线图)
给定: 理想图 - 描绘了我的机器应该具有的预期读数。实际图表 - 描述我的机器在该实例中的实际读数。 X轴:来自机器的力(N) Y 轴:时间这两个图都是使用 python 中的 pyplot 库创
javascript - 类似谷歌的股票图表/折线图
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。关闭 6 年前。
ASP生成柱型体，折线图，饼图源代码
<% function table2(total,table_x,table_y,all_width,all_height,line_n
r - 根据分类变量过滤 plotly 折线图
我想根据数据中的一列离散值过滤使用 plotly 创建的图表。最终目标是能够使用按钮来更新过滤值，所以我不想事先过滤数据。 library(plotly) df % filter(group1=
linechart - 带有日期轴的 javafx 折线图
我正在尝试在 JavaFX 中创建折线图。此折线图应该有一个轴 (y) 与数字和另一个轴 (x) 与日期。日期范围应该由用户使用两个日期选择器来选择。现在这是我的问题:折线图只有类别和数字轴。有什么方
javascript - 无法将日期传递给 nivo 折线图
我正在使用 nivo 折线图，并希望将 x 轴用作时间线，最多一分钟。不幸的是，我无法呈现该图表，因为它无法正确读取日期。例如，这是我的数据的一部分: { x: "2020-04-24T13:07:
raphael - 有没有办法将网格线添加到 gRaphael 折线图？
我有一个用 gRaphael 创建的折线图。它有轴和刻度线，但我想要网格线。是否有内置的方法来实现这一点或可以帮助我的附加库？最佳答案 gRaphael 没有添加网格线的内置方法，但绘制它们非常容易
.net - 数据表中的 OpenXML 折线图
我正在生成一份报告，该报告是根据查询字符串在网页的页面加载时生成的。我在电子表格中生成的单元格数据完全符合我的要求。现在我需要添加一个折线图。数据是动态的，行数会有所不同。搜索后没有信息，这与在 .
javascript - 从未知数量的点初始化 Highcharts 折线图
我正在尝试使用 highcharts 中每 x 秒更新一次的折线图。理想情况下，我希望它使用一些特定数据进行初始化，并每 x 秒轮询一次 Web 服务，并进行相应更新。目前，我只是尝试使用网络服务中

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何在 Javascript 和 D3.js 折线图中通过 stomp.js 绘制来自 Web 套接字消息的实时数据？