首先你需要在计算机上安装Node和npm。
数据的可视化表示是传递复杂信息的最有效手段之一，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.html <!DOCTYPE html> <hml lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link href="https://www.jb51.net/style.css" > <title>Realtime D3 Chart</title> </head> <body> <script src="https://js.pusher.com/4.2/pusher.min.js"></script> <script src="https://d3js.org/d3.v5.min.js"></script> <script src="https://www.jb51.net/article/app.js"></script> </body> </html>
如您所见，HTML文件只是提取构建图形所需的样式和脚本。我们正在利用D3.js来构建图表，并使用Pusher来添加实时功能。app.js文件是应用程序前端代码的写入位置。
在我们开始实现图表之前，让我们在style.css中添加应用程序的样式：
// style.css html { height: 100%; box-sizing: border-box; padding: 0; margin: 0; } *, *::before, *::after { box-sizing: inherit; } body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; overflow: hidden; background: linear-gradient(135deg, #ffffff 0%,#e8f1f5 100%); } .container { position: absolute; padding: 20px; top: 50%; left: 50%; background-color: white; border-radius: 4px; transform: translate(-50%, -50%); box-shadow: 0px 50px 100px 0px rgba(0,0,102,0.1); text-align: center; } .container h1 { color: #333; } .bar { fill: #6875ff; border-radius: 2px; } .bar:hover { fill: #1edede; } .tooltip { opacity: 0; background-color: rgb(170, 204, 247); padding: 5px; border-radius: 4px; transition: opacity 0.2s ease; }
安装服务器依赖项
假设您安装了Node和npm，请运行以下命令来安装应用程序的服务器组件所需的所有依赖项：
npm install express dotenv cors pusher
Pusher 设置
前往Pusher网站并注册一个免费帐户。选择侧栏上的Channels apps，然后点击Create Channels app以创建新应用。
创建应用程序后，从API Keys选项卡中检索凭据，然后在项目目录根目录中创建一个variables.env文件，将以下内容添加到这个文件中。
// variables.env PUSHER_APP_ID=<your app id> PUSHER_APP_KEY=<your app key> PUSHER_APP_SECRET=<your app secret> PUSHER_APP_CLUSTER=<your app cluster>
设置服务器
现在我们已经安装了相关的依赖项并且已经设置了我们的Pusher帐户，我们可以开始构建服务器。
在项目目录的根目录中创建一个名为server.js的新文件，并粘贴以下代码：
// server.js require('dotenv').config({ path: 'variables.env' }); const express = require('express'); const cors = require('cors'); const poll = [ { name: 'Chelsea', votes: 100, }, { name: 'Arsenal', votes: 70, }, { name: 'Liverpool', votes: 250, }, { name: 'Manchester City', votes: 689, }, { name: 'Manchester United', votes: 150, }, ]; const app = express(); app.use(cors()); app.get('/poll', (req, res) => { res.json(poll); }); app.set('port', process.env.PORT || 4000); const server = app.listen(app.get('port'), () => { console.log(Express running → PORT ${server.address().port}); });
保存文件并从项目目录的根目录运行节点server.js以启动服务器。
设置前端应用程序
应用程序的前端将写在我们之前引用的app.js文件中。在项目目录的根目录中创建此文件，并在其中粘贴以下代码：