javascript - 如何在D3中监听频繁的SSE？-6ren

javascript - 如何在D3中监听频繁的SSE？

转载作者：行者123 更新时间：2023-12-03 08:45:21

26

4

我无法找出在 D3 中绘制点时实现平滑过渡的方法。我有一个绘制世界地图的脚本。我正在监听服务器，该服务器向我提供事件的纬度和经度。我想在屏幕上绘制事件，使圆的半径在 1 秒内从 0 增加到 10。因为我正在监听服务器，所以我可以在一秒钟内获得多个数据点。当前一个点仍在转换时，我应该如何绘制另一个点？

这是我想出的代码，但我无法找出将 d3 类型转换添加到“圆”的方法，因为只有当您使用 d3.data([coords]) 时才有可能。进入()。在我看来，在这里使用 d3 似乎有点矫枉过正，因为我可以直接更改属性。

编辑:

为了稍微简化我的问题，我决定收集 1 秒的数据，然后一次性显示这些点。但是，我认为我无法理解 exit() 的本质，因为下面的代码没有删除前面的点并在坐标处创建新点。 Points.exit().remove 不起作用，因为它返回一个大小为 0 的数组，尽管坐标每次都会改变。而且，它会在 map 上连续显示第一组数据，之后不会更改任何内容。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(
                function() {
                    sse = new EventSource('/my_event_source');
                    sse.onmessage = function(message) {
                        console.log('A message has arrived!');
                        var data = JSON.parse(message.data);
                        data.data.forEach(function(d){
                          d.lat = +d.lat;
                          d.lg = +d.lg;
                        });
                        console.log(data.data)
                        plot(data.data);
                       }
                })
    </script>

    <style>

.point{
  fill:rgb(247,148, 32);
  stroke:black;
  stroke-width:0.7;
  opacity:0.7;
}
    </style>

    <script type ="text/javascript">
      function draw(geo_data){
        "use strict";
        var margin = 75,
         width = 1920 -margin,
         height = 1080 -margin; 

      var svg = d3.select('body')
                    .append("svg")
                    .attr('class',"main")
                    .attr('width', width+margin)
                    .attr('height', height+margin)

      var svg2 = svg.append('g')
                    .attr('class','map');


      // convrt the long, lat to pixels ()x,y
      var projection = d3.geo.mercator()
                          .scale(220)
                          .translate([width/2, height/1.5]);
      //svg objects
      var path = d3.geo.path().projection(projection);
      var map = svg2.selectAll('path')
                  .data(geo_data.features)
                  .enter()
                  .append('path')
                  .attr('d', path)
                  .style('fill','rgb(9,157,217)')
                  .style('stroke','black')
                  .style('stroke-width', 0.5);

      svg.append("g").attr("class","point");
      }

      function plot(data){
        "use strict";
        var margin = 75,
         width = 1920 -margin,
         height = 1080 -margin;

         var spot = d3.select('svg.main').select("g.point");

        // convrt the long, lat to pixels ()x,y
         var projection = d3.geo.mercator()
                             .scale(220)
                             .translate([width/2, height/1.5]);



          var coords = data.map(function(d) {
            return projection([d.lg, d.lat]);
          });

          var points = spot.selectAll("circle")
                        .data(coords);

          points.exit().remove();

          points.enter()
                .append("circle")
                .classed("circle", true)
                .attr('cx', function(d){return d[0];})
                .attr('cy', function(d){return d[1];})
                .attr('r', 10);
        }
    </script>
  </head>

  <body>
    <script type = "text/javascript">
    /*Use d3 to load the GeoJSON file*/
    d3.json("/static/world_countries.json", draw);
    </script>
  </body>

</html>

最佳答案

您应该查看 Mike Bostock 的 Thinking with Joins文章。您遇到的问题是概念化如何使用 D3 来操作项目数组，但只有 D3 为最近添加到数组中的新项目制作动画。这是通过 .data().enter() 命令完成的。

我整理了一个您想要实现的目标的示例，省略了地理维度。该示例包含三个主要部分:变量的初始化、每次将新项目添加到数组时运行的绘制函数以及随机添加项目然后调用 draw() 的服务器模拟。

您将看到所有神奇的事情都发生在draw()函数中。即使我们反复将不断增长的数据数组传递给函数，该函数也只会对新添加的数据项进行动画处理。

https://jsbin.com/qoqalufihe/edit?html,output

关于javascript - 如何在D3中监听频繁的SSE？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32914778/

26

4

0

文章推荐： javascript - 根据 div 的某些值填充 div

文章推荐： javascript - 如何将类 smoothscroll 添加到 jquery 中定义的链接

文章推荐： javascript - 赋值中的左手无效？

c# - 监听 socket
我遇到了一个奇怪的问题，我以前从未真正体验过这个，这是服务器的代码(在这种情况下客户端是 firefox)，我创建它的方式: _Socket = new Socket( AddressFamily.I
c - 监听:操作不支持错误
我正在使用 C 编程语言在 Ubuntu 中开发原始套接字程序。由于我使用原始套接字，因此需要使用 SOCK_RAW 类型而不是 SOCK_STREAM。使用 SOCK_RAW 反过来会通过抛出来禁
c - 监听()和选择()
我实际上在客户端-客户端应用程序方面遇到了麻烦。这个问题中的一切都与Unix网络编程环境有关。这是我的情况: 我有一个客户端(从现在起称为 C1)，它调用 listen()在套接字上。 C1 输入
c++ - QTcpSocket 监听
是否可以监听 QTcpSocket？我在 Tcp 上有一个简单的 p2p 连接。但是我找不到在随机自由端口上启动 QTcpSocket 的方法。我应该为此使用 QTcpServer，还是仅对 1 个连
Android 监听 ACTION_DOCK_EVENT
我正在尝试根据 this documentation 监听码头更改事件和 ACTION_DOCK_EVENT . 我的接收器从未被击中。我的代码看起来很简单，所以我想知道监听停靠事件是否需要权限？我
c++ - 在不相关的进程之间共享套接字(监听)
在 Linux 3.9 内核和更高版本中运行，我有一个应用程序 X，它在特定套接字上监听连接。我想写一个不相关的应用程序 Y，它跟踪尝试连接到此套接字的次数、源 IP 等。是否可以在 c++ 中(最
Android 监听/检测日志条目
是否可以监听日志条目？即是否存在用于附加日志条目的广播 Intent ？最佳答案没有 Intent 。使用下面的代码: try { Process mLogcatProc
ios - 监听 AVAudioPCMBuffer
我已经实现了 installTap 方法，它为我提供了音频缓冲区浮点示例。我已经通过我的 C++ DSP 库过滤了它们。我想将此缓冲区“发送”到耳机/扬声器。我从示例中再次执行了 AVAudioPCM
android - 监听 ACTION_SCREEN_OFF
我正在尝试启动一个在后台运行的服务，该服务正在监听 ACTION_SCREEN_OFF，当它找到 ACTION_SCREEN_OFF 时，启动我的 Activity 。我在某处读到您需要创建一个Br
reactjs - 高阶组件 - 监听 onChange
我正在开发一个 HOC，以帮助处理我的 React 应用程序中的表单(用于练习)。 // components/Wrapper.js import React from 'react'; export
MQTT - 监听 ping、断开和连接事件
我有“服务器端”mqtt 客户端，用于监视和管理远程 mqtt 客户端。我想扩展此服务器模块以密切关注远程客户端的连接。在正常操作期间，远程客户端定期 PING 代理，根据代理日志: 1532924
c - 监听 sysfs 电池事件
我正在编写一个检查电池容量的守护进程。这是用于运行 Linux 的太阳能嵌入式设备。我读过使用 sleep() 是个坏主意在守护进程中，因此我正在尝试使用事件。所以我写了一些 PoC，但我没有收到任何
java - 监听 Swing 对象上所有更改事件的一般方法
是否有一个库或技术来监听 Swing ui 对象上的所有可变事件？具体数据。例如，我有一个带有 JTextArea、JCheckBox、JComboBox 等的 JPanel。有没有一种通用的方法可
jquery - KineticJS:通过 .on() 监听
使用 KineticJS，是否可以仅绑定(bind)函数一次？就像 jQuery 的等价物一样......例如。在 jQuery 中 // bad $('.wrap a').on('click', m
jquery 监听 iframe 中的事件
我正在使用 jquery 制作一个非常简单的富文本编辑器...我不想使用第三方的。我需要监听 iframe(同一域等)内的事件，从输入开始。显然我需要经常使用bind()。这就是我目前所拥有的，它
jquery - 监听 DIV 内的变化并采取相应的行动
我有一个函数可以获取 XML 文档并根据 XSL 文档对其进行转换。然后，它将结果放入 id 为 laneconfigdisplay 的 div 中。我想要做的是，与转换逻辑分开，为该 div 设置一
cocoa - 监听 NSTextView 中行的删除
如何检测 NSTextView 中的一行(即“\n”字符)被删除？我可以使用 textView:doCommandBySelector: 轻松监听新行并监听 "insertNewLine:"。 (参见
wpf - 监听 DependencyProperty 更改事件并获取旧值
我有以下代码订阅 VisiblePosition 的属性更改事件Column 的属性(property)类(class): DependencyPropertyDescriptor dpd = Dep
c - 监听 DNS 请求
我正在尝试在本地主机上收听浏览器的 DNS 请求。我写了这段代码: WSADATA wsaData; unsigned char hostname[100]; int sockfd; struct
javascript - 监听 API 的回调？
如何以 JSON 对象的形式接收对我网站上特定页面的回调？这些回调是从第三方 API 发出的，用于报告我与该 API 的通信状态。我想过使用node.js的http.server.listen，但我

首页

博学

6Ren·AI

商城

javascript - 如何在D3中监听频繁的SSE？