有關如何使用Airbnb的 visx 庫為 React Web 應用程序創(chuàng)建瀑布圖的教程。

　　介紹

　　在本教程中，我們將介紹如何為 React Web 應用程序創(chuàng)建瀑布圖。首先，讓我們了解什么是瀑布圖。

　　什么是瀑布圖？

　　瀑布圖與條形圖類似，只是其累積性質(zhì)不同。它顯示一系列步驟，以便在每個步驟中增加或減去當前值，以顯示累積結果。圖表的最后一個條表示總值。

　　我們將要構建的瀑布圖

　　技術

　　我們將使用由Airbnb構建的visx庫。Visx 是一組低級視覺基元，它使用 d3 進行數(shù)學運算，使用 React 進行高效的 DOM 管理。與電子圖表、Recharts 和類似庫不同，它不提供一組即用型圖表。盡管它們提供了高質(zhì)量的可自定義圖表，但不可能構建一種與這些庫提供的完全不同的全新可視化類型。另一方面，visx 提供了一組方便的構建基塊來創(chuàng)建任何自定義可視化效果。

　　項目設置

　　1. 創(chuàng)建一個新的 React 項目

　　使用創(chuàng)建-反應-應用 CLI 初始化“反應 + 類型腳本”項目。

　　2. 安裝依賴項

　　安裝所需的 visx 和 d3 數(shù)組依賴項。

　　3. 創(chuàng)建項目框架

　　我們將從為我們的瀑布圖創(chuàng)建基礎開始。在 src 文件夾下創(chuàng)建以下文件：

　　項目樣板

　　該代碼使用包中的組件，其目的是測量其父元素的尺寸并將其提供給子組件。ParentSize @visx/responsiveWaterfallChart

　　構建瀑布圖

　　在以下步驟中，我們將設計組件 API，并從軸和網(wǎng)格開始逐步構建圖表，最后以呈現(xiàn)數(shù)據(jù)標簽結束。

　　1. 定義組件接口

　　我們的圖形應該支持可視化任意數(shù)據(jù)集。為了通過類型安全支持它，讓我們使用描述數(shù)據(jù)形狀的類型參數(shù)使組件成為通用組件。我們還需要指定訪問器函數(shù)來從單個數(shù)據(jù)點檢索 X 和 Y 值。TDatum

　　WatercallChart component API

　　2. 計算瀑布條

　　下一步是根據(jù)原始數(shù)據(jù)計算瀑布步數(shù)。這可以通過具有累積值跟蹤的數(shù)據(jù)順序枚舉來完成。在每個步驟中，上一個累積值表示列的起點，終點表示為添加或減去當前數(shù)據(jù)點值。

　　從原始數(shù)據(jù)計算瀑布步驟

　　3. 構建圖表刻度

　　現(xiàn)在，當我們有實際值要呈現(xiàn)時，我們可以計算圖表刻度。Scale是一種將數(shù)據(jù)集值映射到可視值(在本例中為坐標)的函數(shù)。

　　對于我們的域是一組瀑布步驟，這些步驟將映射到 的坐標范圍。該參數(shù)定義條形之間的間距。xScale[0, innerWidth]padding

　　另一方面，要計算Y軸域，我們需要迭代起始值和結束值，找到其中的最小值和最大值。然后，我們將它映射到 .該參數(shù)擴大域間隔以使用舍入值，以便更好地理解圖形。[innerHeight, 0]nice

　　創(chuàng)建圖表比例函數(shù)

　　4. 渲染圖表軸

　　使用縮放函數(shù)，我們能夠渲染圖表軸和背景網(wǎng)格。visx 庫為我們將要使用的組件提供了即用型可配置組件。

　　圖表軸和背景網(wǎng)格

　　5. 渲染瀑布步驟

　　使用圖表刻度和先前計算的步驟，我們可以計算圖表條的坐標及其高度，如下所示。

　　渲染瀑布步驟

　　幾乎準備就緒的瀑布圖

　　6. 添加標簽和步驟連接

　　可以通過添加數(shù)據(jù)標簽來提高圖表的可讀性。下面的代碼將正值呈現(xiàn)在其條形上方，將負值呈現(xiàn)在其條形下方。作為最后點睛之筆，讓我們用虛線連接條形圖。

　　帶有數(shù)據(jù)標簽的渲染條

　　最終結果

　　結論

　　在本指南中，我們介紹了什么是瀑布圖，以及使用 visx 的低級基元如何幫助為 React 應用程序創(chuàng)建瀑布圖。