今天就跟大家聊聊有關使用D3.js怎么構建一個實時圖形，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)公司是專業(yè)的寒亭網(wǎng)站建設公司，寒亭接單;提供成都做網(wǎng)站、成都網(wǎng)站設計,網(wǎng)頁設計,網(wǎng)站設計,建網(wǎng)站,PHP網(wǎng)站建設等專業(yè)做網(wǎng)站服務;采用PHP框架,可快速的進行寒亭網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

D3.js是一個JavaScript庫，用于使用SVG，HTML和CSS在Web瀏覽器中生成動態(tài)的交互式數(shù)據(jù)可視化。

D3 提供了各種簡單易用的函數(shù)，大大簡化了 JavaScript 操作數(shù)據(jù)的難度。由于它本質(zhì)上是 JavaScript ，所以用 JavaScript 也是可以實現(xiàn)所有功能的，但它能大大減小你的工作量，尤其是在數(shù)據(jù)可視化方面，D3 已經(jīng)將生成可視化的復雜步驟精簡到了幾個簡單的函數(shù)，你只需要輸入幾個簡單的數(shù)據(jù)，就能夠轉(zhuǎn)換為各種絢麗的圖形。有過 JavaScript 基礎的朋友一定很容易理解它。

在本教程中，我們將探討如何使用D3.js和Pusher Channels構建實時圖形。如果您在閱讀本教程時想要使用代碼，請查看此GitHub存儲庫，其中包含代碼的最終版本。

準備

要完成本教程，您需要安裝Node.js和npm。我在創(chuàng)建本教程時使用的版本如下：

• Node.js v10.4.1

• npm v6.3.0

您還需要在計算機上安裝http-server。它可以通過運行以下命令通過npm安裝：npm install http-server。

雖然不需要Pusher知識，但如果熟悉它后，對學習JavaScript和D3.js會很有幫助。

開始

首先，為我們要構建的應用程序創(chuàng)建一個新目錄。將其稱為實時圖形或任何您喜歡的圖形。在新創(chuàng)建的目錄中，創(chuàng)建一個新的index.html文件并粘貼以下代碼：

//index.html

  
  
  
   
   
   
   
   
  
  

   
   
   
  
  

如您所見，HTML文件只是提取構建圖形所需的樣式和腳本。我們正在利用D3.js來構建圖表，并使用Pusher來添加實時功能。app.js文件是應用程序前端代碼的寫入位置。

在我們開始實現(xiàn)圖表之前，讓我們在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 h2 {
   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網(wǎng)站并注冊一個免費帳戶。選擇側(cè)欄上的Channels apps，然后點擊Create Channels app以創(chuàng)建新應用。

創(chuàng)建應用程序后，從API Keys選項卡中檢索憑據(jù)，然后在項目目錄根目錄中創(chuàng)建一個variables.env文件，將以下內(nèi)容添加到這個文件中。

// variables.env

  PUSHER_APP_ID=
  PUSHER_APP_KEY=
  PUSHER_APP_SECRET=
  PUSHER_APP_CLUSTER=

設置服務器

現(xiàn)在我們已經(jīng)安裝了相關的依賴項并且已經(jīng)設置了我們的Pusher帳戶，我們可以開始構建服務器。

在項目目錄的根目錄中創(chuàng)建一個名為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});
  });

保存文件并從項目目錄的根目錄運行節(jié)點server.js以啟動服務器。

設置前端應用程序

應用程序的前端將寫在我們之前引用的app.js文件中。在項目目錄的根目錄中創(chuàng)建此文件，并在其中粘貼以下代碼：

// app.js

  // set the dimensions and margins of the graph
  const margin = { top: 20, right: 20, bottom: 30, left: 40 };
  const width = 960 - margin.left - margin.right;
  const height = 500 - margin.top - margin.bottom;

  // set the ranges for the graph
  const x = d3
   .scaleBand()
   .range([0, width])
   .padding(0.1);

  const y = d3.scaleLinear().range([height, 0]);

  // append the container for the graph to the page
  const container = d3
   .select('body')
   .append('div')
   .attr('class', 'container');

  container.append('h2').text('Who will win the 2018/19 Premier League Season?');

  // append the svg object to the body of the page
  // append a 'group' element to 'svg'
  // moves the 'group' element to the top left margin
  const svg = container
   .append('svg')
   .attr('width', width + margin.left + margin.right)
   .attr('height', height + margin.top + margin.bottom)
   .append('g')
   .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

  // Create a skeleton structure for a tooltip and append it to the page
  const tip = d3
   .select('body')
   .append('div')
   .attr('class', 'tooltip');

  // Get the poll data from the /poll endpoint
  fetch('http://localhost:4000/poll')
   .then(response => response.json())
   .then(poll => {
    // add the x Axis
    svg
     .append('g')
     .attr('transform', 'translate(0,' + height + ')')
     .attr('class', 'x-axis')
     .call(d3.axisBottom(x));

    // add the y Axis
    svg
     .append('g')
     .attr('class', 'y-axis')
     .call(d3.axisLeft(y));

    update(poll);
   });

  function update(poll) {
   // Scale the range of the data in the x axis
   x.domain(
    poll.map(d => {
     return d.name;
    })
   );

   // Scale the range of the data in the y axis
   y.domain([
    0,
    d3.max(poll, d => {
     return d.votes + 200;
    }),
   ]);

   // Select all bars on the graph, take them out, and exit the previous data set.
   // Enter the new data and append the rectangles for each object in the poll array
   svg
    .selectAll('.bar')
    .remove()
    .exit()
    .data(poll)
    .enter()
    .append('rect')
    .attr('class', 'bar')
    .attr('x', d => {
     return x(d.name);
    })
    .attr('width', x.bandwidth())
    .attr('y', d => {
     return y(d.votes);
    })
    .attr('height', d => {
     return height - y(d.votes);
    })
    .on('mousemove', d => {
     tip
      .style('position', 'absolute')
      .style('left', ${d3.event.pageX + 10}px)
      .style('top', ${d3.event.pageY + 20}px)
      .style('display', 'inline-block')
      .style('opacity', '0.9')
      .html(
       
${d.name}
 ${d.votes} votes
      );
    })
    .on('mouseout', () => tip.style('display', 'none'));

   // update the x-axis
   svg.select('.x-axis').call(d3.axisBottom(x));

   // update the y-axis
   svg.select('.y-axis').call(d3.axisLeft(y));
  }

在上面的代碼塊中，我們使用通過/ poll端點接收的初始數(shù)據(jù)創(chuàng)建了一個基本條形圖。如果您熟悉D3的工作原理，那么您應該熟悉這些代碼。我在代碼的關鍵部分添加了注釋，以指導您構建圖表的方式。

在新終端中，啟動開發(fā)服務器以提供index.html文件：

npx http-server

我在這里使用http-server，但你可以使用你想要的任何服務器。您甚至可以直接在瀏覽器中打開index.html。

此時，您的圖表應如下所示：

使用Pusher實時更新圖表

讓我們確保輪詢的更新可以通過Pusher Channels實時反映在應用程序的前端中。將以下代碼粘貼到app.js文件的末尾。

 // app.js

  const pusher = new Pusher('', {
   cluster: '',
   encrypted: true,
  });

  const channel = pusher.subscribe('poll-channel');
  channel.bind('update-poll', data => {
   update(data.poll);
  });

在這里，我們打開了與Channels的連接，并使用Pusher的subscribe（）方法訂閱了一個名為poll-channel的新頻道。通過bind方法監(jiān)聽輪詢更新，并在收到更新后使用最新數(shù)據(jù)調(diào)用update（）函數(shù)，以便重新呈現(xiàn)圖形。

不要忘記使用Pusher帳戶信息中心中的相應詳細信息替換占位符。

從服務器觸發(fā)更新

我們將模擬每秒更新一次的輪詢，并在數(shù)據(jù)發(fā)生變化時使用Pusher觸發(fā)更新，以便輪詢的訂閱者（客戶端）可以實時接收更新的數(shù)據(jù)。

在其他導入下面的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,
  });

  function getRandomNumber(min, max) {
   return Math.floor(Math.random() * (max - min) + min);
  }

  function increment() {
   const num = getRandomNumber(0, poll.length);
   poll[num].votes += 20;
  }

  function updatePoll() {
   setInterval(() => {
    increment();
    pusher.trigger('poll-channel', 'update-poll', {
     poll,
    });
   }, 1000);
  }

然后將/ poll端點更改為如下所示：

 app.get('/poll', (req, res) => {
   res.json(poll);
   updatePoll();
  });

/ poll路由將初始輪詢數(shù)據(jù)發(fā)送到客戶端并調(diào)用updatePoll（）函數(shù)，該函數(shù)以三秒為間隔遞增隨機俱樂部的投票，并觸發(fā)我們在最后一步中在客戶端上創(chuàng)建的輪詢頻道的更新。

通過從項目目錄的根目錄運行節(jié)點server.js，終止服務器并重新啟動它。此時，您應該有一個實時更新的條形圖。

看完上述內(nèi)容，你們對使用D3.js怎么構建一個實時圖形有進一步的了解嗎？如果還想了解更多知識或者相關內(nèi)容，請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

當前標題：使用D3.js怎么構建一個實時圖形-創(chuàng)新互聯(lián)
分享地址：http://weahome.cn/article/hhhoh.html