从品牌网站建设到网络营销策划,从策略到执行的一站式服务
今天就跟大家聊聊有关使用D3.js怎么构建一个实时图形,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
D3.js是一个JavaScript库,用于使用SVG,HTML和CSS在Web浏览器中生成动态的交互式数据可视化。
D3 提供了各种简单易用的函数,大大简化了 JavaScript 操作数据的难度。由于它本质上是 JavaScript ,所以用 JavaScript 也是可以实现所有功能的,但它能大大减小你的工作量,尤其是在数据可视化方面,D3 已经将生成可视化的复杂步骤精简到了几个简单的函数,你只需要输入几个简单的数据,就能够转换为各种绚丽的图形。有过 JavaScript 基础的朋友一定很容易理解它。
在本教程中,我们将探讨如何使用D3.js和Pusher Channels构建实时图形。如果您在阅读本教程时想要使用代码,请查看此GitHub存储库,其中包含代码的最终版本。
准备
要完成本教程,您需要安装Node.js和npm。我在创建本教程时使用的版本如下:
Node.js v10.4.1
npm v6.3.0
您还需要在计算机上安装http-server。它可以通过运行以下命令通过npm安装:npm install http-server。
虽然不需要Pusher知识,但如果熟悉它后,对学习JavaScript和D3.js会很有帮助。
开始
首先,为我们要构建的应用程序创建一个新目录。将其称为实时图形或任何您喜欢的图形。在新创建的目录中,创建一个新的index.html文件并粘贴以下代码:
//index.htmlRealtime D3 Chart