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

　　介紹

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

　　什么是瀑布圖？

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

　　我們將要構(gòu)建的瀑布圖

　　技術(shù)

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

　　項(xiàng)目設(shè)置

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

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

　　2. 安裝依賴項(xiàng)

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

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

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

　　項(xiàng)目樣板

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

　　構(gòu)建瀑布圖

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

　　1. 定義組件接口

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

　　WatercallChart component API

　　2. 計(jì)算瀑布條

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

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

　　3. 構(gòu)建圖表刻度

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

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

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

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

　　4. 渲染圖表軸

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

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

　　5. 渲染瀑布步驟

　　使用圖表刻度和先前計(jì)算的步驟，我們可以計(jì)算圖表?xiàng)l的坐標(biāo)及其高度，如下所示。

　　渲染瀑布步驟

　　幾乎準(zhǔn)備就緒的瀑布圖

　　6. 添加標(biāo)簽和步驟連接

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

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

　　最終結(jié)果

　　結(jié)論

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