正文 

当前位置： 首页 > 知识 >

通过 socket.io 更新实时 d3 图表

     2023-03-07     151

关键词：

【中文标题】通过 socket.io 更新实时 d3 图表【英文标题】：Update real time d3 chart by socket.io 【发布时间】：2015-10-20 17:30:18 【问题描述】：

我正在编写一个基于 d3.js 的实时图表指令。结构如下：

myDirective.js：

app.directive('myDirective', function(socketio) 

  return 
    restrict: 'EA',
    templateUrl: '../../views/partials/chart.html',
    controller: DataController,

    link: function(scope, elem, attrs, ctrl) 

      scope.Watch = scope.$watch(function() 
        return ctrl.data;
      , function(newVal) 
        // d3 code part
      );

      socketio.on(event, function(newdata) 
        ctrl.data.push(newdata);
        // redraw chart
      );
    
  ;
);

在上面的d3代码部分，我参考了http://bl.ocks.org/gniemetz/4618602。主要代码几乎相同，图表显示良好。

现在我想使用socket.io通过代码更新图表

socketio.on(event, function(newdata) 
  ctrl.data.push(newdata);
  // redraw chart
);

但不知道如何使用更新后的“ctrl.data”有效地重绘图表。我知道在 Morris.js 中，我们可以通过 '.setData(ctrl.data)' 方法做到这一点，但不知道如何在 d3 中更新。有什么想法吗？

ps：我尝试将上面的d3代码复制/粘贴到这个地方，但是总是报错：“TypeError: t.slice is not a function”

谢谢，

【问题讨论】：

我认为调用 myD3Selection.data(newdata) 会触发 d3 的插入/更新/删除处理程序 想知道什么是 myD3Selection？谢谢@Plato 一个 d3 选择是零个或多个 DOM 元素，通常用 li.myDataBoundItems 之类的 css 标识。 d3 将数据数组中的一项映射到选择中的每个元素。这可以让您的 DOM 在您更改数据时进行响应式更新。 @mbostock 这里有详细解释bost.ocks.org/mike/selection @Plato，虽然这是正确的，但这只是需要的一部分。有关更多信息，请参阅我的答案中的小提琴。 @Plato 是的，该网站有帮助。我认为这也是一个有前途的解决方案，让我稍后尝试。谢谢你的帮助，柏拉图。 【参考方案1】：

快速而肮脏的方式：每次有更新时，清空<div>并重新绘制整个图表。

更优雅的方式：编写自己的update 函数来添加新数据。这是迄今为止最具视觉吸引力的方式，因为图形实际上是动画的。 D3 是为这类事情精心打造的，因此它绝不是其功能的延伸。这将花费更长的时间，但通常会提供更令人愉悦的体验，如 D3 画廊中的一些图表所示（例如：http://square.github.io/crossfilter/、http://bl.ocks.org/NPashaP/96447623ef4d342ee09b）以下是我将如何使用您想要的图表来做到这一点：

保持代码不变 添加一个更新函数，比如名为 Update()，它在您评论 // redraw chart 的 socketio.on(...) 部分中调用 然后Update() 将重新定义所有 D3 变量并为更改设置动画

Update() 基本上将通过执行从头开始创建图表所用步骤的子集来完成上述项目符号。以下是它所做的概述：重新缩放 x 和 y 轴，以图形方式更新轴，将原始点和线转换到新轴上的新位置，添加新点，并添加可能需要完成的任何线图表

我正在为您开发一个 jsFiddle，并使用一个有效的 Update 来演示上述内容，希望在您的代码中实现它会很简单。完成后我会编辑这篇文章，但我想在我处理它的同时给你一个“快速”的答案，同时试图帮助你。如果您想同时阅读，请查看 http://blog.visual.ly/creating-animations-and-transitions-with-d3-js/

更新

https://jsfiddle.net/npzjLng9/2/。我以您提供的示例为例，必须将要加载的数据修改为本地数据，而不是来自文本文件；但是，它的格式相同，并且为了便于阅读，条目也少了很多。除此之外，我没有对示例进行任何更改。这是我添加的内容：向下滚动并找到最后一个函数Update。这是更新和动画发生的地方。注意函数的流程：

    “更新”数据，就好像您的 socket.io 是接收数据的人，然后将其附加到数据集。 重新定义坐标区 重新定义点和路径 指定过渡持续时间（随意选择适合您的数字） 在情节上实际更新和动画变化

我添加了一个按钮来模拟socket.io 接收事件。

对于您的应用程序，忽略Update() 函数中的data.push 和console.log，我认为这就是您所需要的——除了将数据指向您的ctrl.data 数组并运行Update()当然，在您的socketio.on(...) 中起作用。

相同的基本大纲适用于大多数图表的动画/更新。

希望对你有帮助！

【讨论】：

非常感谢@mjdiaz89 我也在努力按照你的指导，期待你的jsFiddle 我上传了小提琴（上面编辑过的帖子）。看看，如果您有任何问题，请告诉我。享受吧！ 很好的回复，很有帮助。但我认为我仍然需要更多时间来消化你的代码。无论如何，感谢您的大力帮助。 @mjdiaz89 我想用socketio来更新数据，所以我复制粘贴你的更新函数体，并把它放到socketio.on这样的回调函数中，jsfiddle.net/lszhou/zLeyv0q2但是我得到了错误“错误：无效值对于 属性”，我猜它与变量范围有关，请指教。 @Manuel J.迪亚兹 这行得通吗？我想你会有一个变量范围的问题，不是吗？我提供的 Fiddle 有效，因为脚本根目录中的所有变量声明也在 Update() 函数的范围内，因此 D3 能够重新定义它们并相应地更新图表。

d3.js 使用 python websocket 数据实时更新 svg 行

...】：我是d3.js/javascript和面向Web编程的新手。我的目标是通过websocket用新值更新现有图表。注意：在这个例子中，我已经有一个javascript数组“var”，我需要添加通过 查看详情

如何使用 Socket.io 实时更新大量数据

】如何使用Socket.io实时更新大量数据【英文标题】：HowtokeepalargesetofdatauptodateinrealtimeusingSocket.io【发布时间】：2021-04-1910:32:45【问题描述】：我正在编写一个具有多种用户类型的系统，该系统被授予不同级别的访问权限，以在数... 查看详情

socket.io vs swr 用于更新实时内容

】socket.iovsswr用于更新实时内容【英文标题】：socket.iovsswrforupdatingreal-timecontent【发布时间】：2021-01-2218:38:03【问题描述】：我目前正在使用next.js构建一个Web应用程序，它需要跨设备实时更新，例如，如果有人加入了一个群组，... 查看详情

通过 socket.io 流式传输实时音频

】通过socket.io流式传输实时音频【英文标题】：Streamrealtimeaudiooversocket.io【发布时间】：2021-11-1503:24:57【问题描述】：如何使用socket.io将实时音频从一个客户端流式传输到可能的多个客户端？我已经到了可以在同一个标​​签中... 查看详情

通过 socket.io 1.0 实时音频

】通过socket.io1.0实时音频【英文标题】：Liveaudioviasocket.io1.0【发布时间】：2014-09-1212:25:05【问题描述】：来自socket.io网站二进制流从1.0开始，可以来回发送任何blob：图像、音频、视频。我现在想知道，如果这不能成为我最近想... 查看详情

如何使用 mysql 数据库中的 nodejs 和 socket.io 在网页上获得实时更新？

】如何使用mysql数据库中的nodejs和socket.io在网页上获得实时更新？【英文标题】：HowcanIgetrealtimeupdateonawebpageusingnodejsandsocket.iofromamysqldatabase?【发布时间】：2018-06-0722:00:18【问题描述】：我正在关注以下关于如何从mysql数据库中的n... 查看详情

在 node.js 中使用 socket.io 通过 webrtc 广播实时音频

】在node.js中使用socket.io通过webrtc广播实时音频【英文标题】：Broadcastingliveaudiothroughwebrtcusingsocket.ioinnode.js【发布时间】：2015-08-1119:02:59【问题描述】：我正在尝试使用webrtc通过getUserMedia()获取音频并使用socket.io将其发送到服务器... 查看详情

通过 Socket.io 更新 React 状态

】通过Socket.io更新React状态【英文标题】：UpdateReactstateviaSocket.io【发布时间】：2016-02-2916:17:00【问题描述】：我的React组件使用来自socket.io的数据作为它的状态。我不确定如何在更新数据时只更新状态而不重新渲染整个组件。示... 查看详情

CloudFlare 和 socket.io

...述】：我正在使用CloudFlare来实现RESTAPI。我需要添加一些通过Node.JS上的socket.io实现的通知。当socket.io使用实时连接来保持客户端更新时，它会工作，因为连接是在服务器-客户端之间建立的，但是当socket.io进行轮询时会发生什么... 查看详情

用于实时应用的 Socket.io

】用于实时应用的Socket.io【英文标题】：Socket.ioforrealtimeapplication【发布时间】：2011-09-2301:24:50【问题描述】：所以我有几个月前建立的另一个项目。它目前使用jquery和ajax并每30秒调用一次php脚本。php脚本查询mysql并将结果传回显... 查看详情

socket.io入门原理

...eg;Flash®Socket大部分PC浏览器都支持的socket模式，不过是通过第三方嵌入到浏览器，不在W3C规范内，所以可能将逐步被淘汰，况且，大部分的手机浏览器都不支持这种模式。 AJAXlongpolling这个很好理解，所有浏览器都支持这种... 查看详情

AngularJS + Socket.IO - 如何更新模型？

】AngularJS+Socket.IO-如何更新模型？【英文标题】：AngularJS+Socket.IO-howtoupdatemodel?【发布时间】：2013-09-0111:29:11【问题描述】：所以我有了这个用AngularJS制作的基本CRUDTodo应用程序。然后我想我想用一些Socket.IO来增加它的趣味性，使... 查看详情

D3.JS 具有实时数据、平移和缩放的时间序列折线图

...问题描述】：FIDDLE我正在尝试在d3中创建一个实时（实时更新）时间序列图表，该图表也可以平移（在X中）和缩放。理想情况下，我想要的功能是，如果用户可以看到线的最右边部分，那么当将新数据添加到图表时， 查看详情

使用node.js+socket.io搭建websocket实时应用

Web领域的实时推送技术，也被称作Realtime技术。这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新。它有着广泛的应用场景，比如在线聊天室、在线客服系统、评论系统、WebIM等。作者：潘良虎链接：https://www... 查看详情

聊天功能插件socket.io(代码片段)

...时间的实时双向通讯库　　基于websocket协议的　　前后端通过时间进行双向通讯　　配合express快速开发实时应用二、Socket.io和ajax区别　　基于不同的网络协议　　ajax基于http协议，单向，实时获取数据只能轮询　　socket.io基于we... 查看详情

iOS 中的 websockets 和实时更新

】iOS中的websockets和实时更新【英文标题】：websocketsandrealtimeupdatesiniOS【发布时间】：2013-07-1513:11:54【问题描述】：我正在学习express.js和socket.io来制作实时Web应用程序。据我所知，socket.io（和websockets）在浏览器中可用。所以它可... 查看详情

如何使用 node.js、socket.io 和 mysql 显示实时数据？

...新手，正在尝试向网页显示实时数据。我尝试做的是首先通过URL插入MySQL数据库。这是URL[http://localhost:4000/api/motor_deta 查看详情

使用 D3 生成“实时”图

...这样的东西，它会随着新数据的可用而更新。新数据可以通过点击带有“最后一次看到”时间戳的jsonurl或其他一些AJAX-y方法来获得。编辑：答 查看详情