這是摘自中的戴維斯書第11章的摘錄。與JavaScript的資料爭論現在可以在曼寧早期訪問程式。我完全喜歡這個想法，因為網路上有很多資料視覺化工具，它依賴於完全執行的客戶端javascript以及潛在的api呼叫。它並不像它可能那樣健壯、可訪問或無任何功能。如果您將資料視覺化返回到伺服器，您可以向該締約方帶來漸進增強。
在進行探索性編碼或資料分析時n。Node。js能夠從我們的資料中呈現視覺化是非常有用的。如果我們在基於瀏覽器的javascript中工作，我們可以選擇許多圖表、圖形和視覺化庫中的任何一個。不幸的是，在Node。js下，我們沒有任何可行的選擇，那麼我們如何才能實現呢？
我們可以嘗試像假裝在Node。js下面的在一樣，但是我找到了更好的方法。我們罐使用基於瀏覽器的視覺化庫為我們提供了一個無頭瀏覽器。這是一個沒有使用者介面的瀏覽器。你可以把它想象成一個隱形的瀏覽器。
我用惡夢在Node。js下，捕獲視覺化到png和pdf檔案，它工作真的很好！
無頭瀏覽器
當我們想到一個網路瀏覽器時，我們通常會想到圖形軟體，我們每天都會在瀏覽網頁時互動。通常，我們直接與這樣的瀏覽器互動，用我們的眼睛檢視它，並用滑鼠和鍵盤控制它，如圖1所示。
圖1：
正常狀態：我們的視覺化呈現在瀏覽器中，使用者直接與瀏覽器互動。
另一方面，一個無頭瀏覽器是一個web瀏覽器，它沒有圖形使用者介面，也沒有直接的手段來控制它。您可能會問，瀏覽器的使用是什麼，我們無法直接看到或互動。
嗯，作為開發人員，我們通常會使用一個無頭瀏覽器來自動化和測試網站。假設您已經建立了一個web頁面，您希望執行一系列自動化測試來證明它是按照預期執行的。測試套件是自動化的，這意味著它是由程式碼控制的，這意味著我們需要驅動從程式碼中的瀏覽器。
我們使用一個無頭瀏覽器進行自動化測試，因為我們不需要直接檢視或與正在測試的網頁互動。在進度上檢視這樣的自動化測試是不必要的，我們需要知道的是測試是否透過或失敗-如果失敗，我們想知道何必。實際上，為被測試的瀏覽器提供GUI實際上是對連續整合或連續部署伺服器的一個障礙，在那裡，許多這樣的測試可以並行執行。
因此，無頭瀏覽器常常用於對我們的網頁進行自動化測試，但是它們對於捕捉基於瀏覽器的視覺化並將其輸出到png影象或pdf檔案也非常有用。為了使這項工作需要一個web伺服器和視覺化程式，我們必須編寫程式碼來例項一個無頭瀏覽器並指向我們的web伺服器。然後我們的程式碼指示無頭瀏覽器以一個png或pdf檔案將網頁截圖儲存到我們的檔案系統中。
圖2：
我們可以使用Node。js下的無頭瀏覽器來捕獲對靜態影象檔案的視覺化
惡夢是我無頭瀏覽器的選擇。它是一個基於上的庫（透過國家預防機制安裝），它構建於電子。電子是一種框架，通常用於構建基於web技術的跨平臺桌面應用程式。
為什麼要做惡夢？
這叫惡夢，但它絕對不是一個噩夢。事實上，這是我使用過的最簡單、最方便的無頭瀏覽器。它自動包含電子，因此我們只需將噩夢安裝到我們的Node。js專案中，如下：
npm install ——save nightmare
這就是我們安裝噩夢所需要的，我們可以從javascript開始使用它！
噩夢幾乎來自我們所需要的一切：一個帶有嵌入式無頭瀏覽器的指令碼庫。它還包括了控制無頭瀏覽器從Node。js來控制的通訊機制。大部分情況下，它是無縫的，並且整合到了Node。js。
電子是建立在Node。js和鉻之上的，並且由GitHub維護，是許多流行桌面應用程式的基礎。
下面是我選擇使用噩夢來處理任何其他無頭瀏覽器的原因：
電子是非常穩定的。
電子具有良好的效能。
該api簡單易學。
沒有複雜的配置（只需開始使用）。
它與Node。js非常好地整合在一起。
惡夢與電子
當您透過國家預防機制安裝噩夢時，它會自動地附帶一個嵌入式版本的電子。因此，我們可以說，噩夢不僅僅是一個控制無頭瀏覽器的庫，它有效地實現了。是無頭瀏覽器。這也是我喜歡噩夢的另一個原因。對於其他一些無頭瀏覽器，控制元件庫是單獨的，或者比它更糟糕，而且它們根本沒有一個Node。js控制庫。在最糟糕的情況下，您必須捲起自己的通訊機制來控制無頭瀏覽器。
惡夢使用在建立電子過程例項。
child_process
模組。然後使用程序間通訊和自定義協議來控制電子例項。圖3顯示了關係。
圖3：
惡夢讓我們可以控制電子執行作為無頭瀏覽器
我們的過程：用惡夢捕捉視覺化
那麼，如何捕捉影象檔案的視覺化過程呢？這就是我們所瞄準的目標：
獲取資料。
啟動本地web伺服器來承載我們的視覺化。
將我們的資料注入web伺服器
例項一個無頭瀏覽器並指向本地web伺服器
等待視覺化顯示
捕獲視覺化到影象檔案的螢幕截圖
關閉無頭瀏覽器
關閉本地web伺服器
準備視覺化渲染
首先我們需要的是視覺化。圖4顯示了我們將使用的圖表。這張圖表顯示了紐約市過去200年間年平均氣溫。
圖4：
紐約市過去200年間平均年氣溫
要執行此程式碼，您需要安裝Node。js。對於這個第一個示例，我們還將使用生活（任何web伺服器將做）來測試視覺化（因為我們還沒有建立我們的Node。js伺服器），安裝執行伺服器如下：
npm install -g live-server
然後，您可以克隆這個部落格文章的示例程式碼回收：
git clone https：//github。com/Data-Wrangling-with-JavaScript/nodejs-visualization-example
現在進入回購，安裝依賴項並使用執行伺服器執行示例
cd nodejs-visualization-example/basic-visualizationbower installlive-server
當執行伺服器時，瀏覽器應該自動開啟，您應該看到圖4中的圖表。
檢查視覺化在瀏覽器中直接工作是一個好主意，然後嘗試在一個無頭瀏覽器中捕獲它；它很容易發生錯誤，而問題更容易在實際瀏覽器中進行故障排除，而不是在無頭執行伺服器上進行故障排除。活重灌內建，所以現在您有一個很好的設定，當您可以編輯和改進圖表互動之前，嘗試捕獲它在Node。js下。
這條簡單的線圖是用C3。請檢視示例程式碼，並檢視下面示例程式碼中的一些示例c3廊道瞭解更多關於c3的知識。
啟動web伺服器
為了承載我們的視覺化，我們需要一個web伺服器。我們還沒有足夠的網路伺服器，我們還需要能夠動態啟動和停止它。清單1顯示了我們web伺服器的程式碼。
清單1-可以啟動和停止的簡單web伺服器的程式碼
const express = require（‘express’）；const path = require（‘path’）； module。exports = { start： （） => { // Export a start function so we can start the web server on demand。 return new Promise（（resolve， reject） => { const app = express（）； const staticFilesPath = path。join（__dirname， “public”）； // Make our ‘public’ sub-directory accessible via HTTP。 const staticFilesMiddleWare = express。static（staticFilesPath）； app。use（‘/’， staticFilesMiddleWare）； const server = app。listen（3000， err => { // Start the web server！ if （err） { reject（err）； // Error occurred while starting web server。 } else { resolve（server）； // Web server started ok。 } }）； }）； }}
所以現在我們有了基於瀏覽器的視覺化技術，我們有一個web伺服器，可以在需求上啟動和停止。這些是我們需要捕獲伺服器端視覺化所需的原始元素。讓我們把它和噩夢混起來！
將網頁呈現為影象
現在讓我們來編寫程式碼來捕捉視覺化的螢幕快照和噩夢。清單2顯示了例項失敗的程式碼，並將其放在我們的web伺服器上，然後進行截圖。
清單2-使用噩夢捕獲我們的圖表到影象檔案
const webServer = require（‘。/web-server。js’）；const Nightmare = require（‘nightmare’）； webServer。start（） // Start the web server。。then（server => { const outputImagePath = “。/output/nyc-temperatures。png”； const nightmare = new Nightmare（）； // Create the Nightmare instance。 return nightmare。goto（“http：//localhost：3000”） // Point the browser at the web server we just started。 。wait（“svg”） // Wait until the chart appears on screen。 。screenshot（outputImagePath） // Capture a screenshot to an image file。 。end（） // End the Nightmare session。 Any queued operations are completed and the headless browser is terminated。 。then（（） => server。close（））； // Stop the web server when we are done。}）。then（（） => { console。log（“All done ：）”）；}）。catch（err => { console。error（“Something went wrong ：（”）； console。error（err）；}）；
注意使用
goto
函式，這實際上就是引導瀏覽器載入我們的視覺化。
網頁通常需要一些時間來載入。這可能不會很長，尤其是在我們執行本地Web伺服器的情況下，但我們仍然面臨著在無頭瀏覽器開始之前或過程中截圖的危險。這就是為什麼我們必須打電話給
wait
功能等等直到圖表的
元素出現在瀏覽器的是中，然後再呼叫螢幕快照函式。
最終，
end
函式被呼叫。直到現在我們已經有效地構建了一個命令列表，以便傳送到無頭瀏覽器。最終函式實際上將命令傳送到瀏覽器，該瀏覽器將接收螢幕截圖並輸出該檔案。
nyc-temperatures。png
。在影象檔案被捕獲後，我們透過關閉Web伺服器來完成。
進入子目錄並安裝依賴項：
cd nodejs-visualization-example/capture-visualizationcd public bower installcd 。。npm installlive-server
現在您可以為自己嘗試程式碼：
node index。js
關注小編了解更多精彩內容，私信學習，
領取精品的前端免費學習課程影片，同時我將為您分享精品資料。
