使用D3.js构建实时图形的示例代码

时间：2021-08-30 来源：互联网编辑：宝哥软件园浏览：次

首先，您需要在计算机上安装Node和npm。

数据的可视化表示是传递复杂信息的最有效手段之一。D3.js为创建这些数据可视化提供了强大的工具和灵活性。

D3.js是一个JavaScript库，用于在Web浏览器中使用SVG、HTML和CSS生成动态交互数据可视化。

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 name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' link rel='样式表' href=' style . CSS ' rel=' external nofollow ' title实时D3 Chart/title/head body script src=' http 3360https://js . pusher.com/4.2/pusher min。我们正在使用D3.js构建图表，并使用Pusher添加实时功能。app.js文件是编写应用程序前端代码的地方。

在开始实现图表之前，让我们在style.css中添加应用程序的样式：

//style . CSS html { height : 100%；盒子尺寸：边框盒子；padd : 0；margin : 0；} *，*:before，* : before { box-sizing : inherit；}车身{ height : 100%；font-family: -apple-system、BlinkMacSystemFont、' Segoe UI '、Roboto、Oxygen-Sans、Ubuntu、Cantarell、' Helvetica Neue '、Sans-serif；飞越：隐藏；background:线性渐变(135度，#ffffff 0%，# e8f1 f 5 100%)；} .容器{ position:绝对值；padding: 20pxtop : 50%；左侧：50%；背景-颜色：白色；border-radius : 4px；transform: translate(-50%，-50%)；box-shadow : 0px 50px 100px 0px rgba(0，0，102，0.1)；文本对齐：中心；} .容器h1 { color: # 333} .bar { fill: # 6875ffborder-radius : 2px；} . bar : hover { fill : # 1e dede；} .工具提示{ opa city 3360 0；背景-color: rgb(170，204，247)；padding: 5pxborder-radius : 4px；transition:不透明度0.2s容易；}安装服务器依赖项

假设您安装了节点和npm，运行以下命令来安装应用程序的服务器组件所需的所有依赖项：

NPM快装dot env cors推杆的设置

去Pusher网站注册一个免费账户。在边栏上选择频道应用程序，然后点按“创建频道应用程序”来创建新应用程序。

创建应用程序后，从API Keys选项卡中检索凭据，然后在项目目录的根目录中创建一个variables.env文件，并将以下内容添加到该文件中。

//变量。环境推进器_应用_标识=您的app id PUSHER _ APP _ KEY=您的app密钥PUSHER _ APP _ SECRET=您的app机密PUSHER _ APP _ CLUSTER=您的应用集群设置服务器

现在我们已经安装了相关的依赖项并且已经设置了我们的推进器帐户，我们可以开始构建服务器。

在项目目录的根目录中创建一个名为server.js的新文件，并粘贴以下代码：

//server.js require('dotenv ').config({ path : '变量。env ' })；const express=require(' express ')；const CORS=require(' CORS ')；const poll=[ { name: 'Chelsea '，votes: 100，}，{ name: '阿森纳，votes: 70，}，{ name: '利物浦，votes: 250，}，{ name: '曼城，votes: 689，}，{ name 3: '曼联，votes: 150，}，]；const app=express()；app。使用(CORS())；app.get('/poll '，(req，RES)={ RES . JSON(poll)；});app.set('端口'，进程。环境。端口| | 4000)；const server=app。听(app。get(' PORT ')，()={ console.log(Express正在运行 PORT ${server.address().端口});});保存文件并从项目目录的根目录运行节点server.js以启动服务器。

设置前端应用程序

应用程序的前端将写在我们之前引用的app.js文件中。在项目目录的根目录中创建此文件，并在其中粘贴以下代码：

//app.js //设置图形的尺寸和边距const margin={ top: 20，right: 20，bottom: 30，left : 40 }；常量宽度=960 -边距。左边距。右边距；常量高度=500 -边距。上边距。下边距；//设置图表常量x=d3的范围scaleBand().范围([0,宽度])。填充(0.1);const y=d3.scaleLinear().范围([高度，0]);//将图形的容器追加到页面常量容器=d3 .选择('正文')。追加(' div ').attr('class '，' container ')；container.append('h1 ').正文('谁会赢得2018/19赛季英超冠军？');//将挽救（saving的简写）对象追加到页面的正文中//将“组”元素追加到“SVG”//将“组”元素移动到左上角的const svg=容器中。追加(' svg ').attr('width '，width margin.left margin.right).attr('高度，高度边距。上边距。下边距)。追加(' g ').attr('transform '，' translate '(' margin。左边距。top’)；//为工具提示创建一个框架结构，并将其附加到页面常量提示=d3 .选择('正文')。追加(' div ').attr('class '，' tooltip ')；//从/poll端点获取获取轮询数据(' http://localhost:4000/poll ').然后(response=response.json()).然后(poll={ //添加x轴svg .追加(' g ').attr('transform '，' translate(0，' height ')).attr('class '，' x轴')。呼叫(D3。axis bottom(x))；//添加y轴svg .追加(' g ').attr('class '，' y轴')。呼叫(D3。axis left(y))；更新（投票);});函数更新(投票){ //缩放x轴x .域(轮询。map(d={ return d . name；}) );//缩放y轴y.domain中数据的范围([ 0，d3.max(poll，d={ return d . loats 200}), ]);//选择图上所有的条，取出，退出上一个数据集。//输入新数据，并为轮询数组挽救（saving的简写）中的每个对象追加矩形。选择全部('。条')。移除()。退出()。数据（民意调查)。输入()。追加(' rect ').attr('class '，' bar ').attr('x '，d={ return x(d . name)；}) .attr('width '，x.bandwidth()).attr('y '，d={ return y(d。选票);}) .attr('height '，d={ return height-y(d . looks)；}) .on('mousemove '，d={ tip .样式("位置"、"绝对")。样式('左，${d3.event.pageX 10}px).样式(' top '，${d3.event.pageY 20}px).样式("显示"、"内嵌块")。样式("不透明度","0.9")。html(div strong $ { d . name }/strong/div span $ { d . loat }票数/span)；}) .on('mouseout '，)=tip.style('display '，' none ')；//更新x轴svg.select(' .x轴')。呼叫(D3。axis bottom(x))；//更新y轴svg.select(' .y轴')。呼叫(D3。axis left(y))；}在上面的代码块中，我们使用通过/poll端点接收的初始数据创建了一个基本条形图。如果您熟悉D3的工作原理，那么您应该熟悉这些代码。我在代码的关键部分添加了注释，以指导您构建图表的方式。

在新终端中，启动开发服务器以提供index.html文件：

npx http-服务器我在这里使用超文本传送协议（Hyper Text Transport Protocol的缩写）服务器，但你可以使用你想要的任何服务器。您甚至可以直接在浏览器中打开index.html。

此时，您的图表应如下所示：

使用推进器实时更新图表

让我们确保轮询的更新可以通过推动器通道实时反映在应用程序的前端中。将以下代码粘贴到app.js文件的末尾。

//app.js const pusher=new Pusher('您的app key '，{ cluster: '您的app cluster '，encrypted: true，})；const channel=pusher . subscribe(' poll-channel ')；channel.bind('update-poll '，data={ update(data . poll)；});这里，我们打开了与Channels的连接，并使用Pusher的subscribe()方法订阅了一个名为poll-channel的新频道。通过bind方法监听轮询更新，收到更新后用最新数据调用update()函数，重新渲染图形。

不要忘记在推手客户信息中心用相应的详细信息替换占位符。

从服务器触发更新

我们将模拟每秒更新一次的轮询，在数据发生变化时使用Pusher触发更新，让被轮询的订阅者(客户端)能够实时接收到更新的数据。

在server.js顶部的其他导入下添加以下代码：

const Pusher=require(' Pusher ')；const Pusher=new Pusher({ appid : process . env . Pusher _ APP _ ID，KEY : process . env . Pusher _ APP _ KEY，SECRET : process . env . Pusher _ APP _ SECRET，CLUSTER : process . env . Pusher _ APP _ CLUSTER，encrypted: true，})；函数getRandomNumber(min，max){ return math . floor(math . random()*(max-min)min)；}函数increment(){ const num=getRandomNumber(0，poll . length)；投票数。票数=20；}函数updatePoll(){ setInterval(()={ increment()；pusher.trigger('poll-channel '，' update-poll '，{ poll，})；}, 1000);}然后将/poll端点更改如下：

app.get('/poll '，(req，RES)={ RES . JSON(poll)；updatePoll()；});/poll路由将初始轮询数据发送到客户端，并调用updatePoll()函数，该函数以三秒为间隔递增随机俱乐部的投票，并触发我们在最后一步中在客户端创建的轮询通道的更新。

通过从项目目录的根目录运行node server.js来终止服务器并重新启动它。此时，您应该有一个实时更新的条形图。