搜尋

首頁 >web前端 >js教程 >與現代JavaScript和D3的交互式數據可視化

與現代JavaScript和D3的交互式數據可視化

Lisa Kudrow
Lisa Kudrow原創
2025-02-15 09:41:12783瀏覽

與現代JavaScript和D3的交互式數據可視化

>在本文中，我想帶您完成我最近構建的示例項目- a完全原始的使用D3庫的可視化類型，該類型展示了這些組件中的每個組件如何累加以使D3一個很棒的圖書館。

D3代表數據驅動的文檔。這是一個JavaScript庫，可用於製作各種出色的數據可視化和圖表。

>如果您曾經看過《紐約時報》中的任何出色的互動故事，那麼您已經看到了D3的行動。您還可以在此處查看使用D3構建的一些很棒的項目。 >

>學習曲線對於進入圖書館的啟動非常陡峭，因為D3有一些特殊的怪癖，您可能從未見過。但是，如果您可以超越足夠的D3學習的第一階段，那麼您很快就可以為自己構建一些非常酷的東西。

>

>有三個主要因素確實使D3在那裡的任何其他庫中脫穎而出：

  1. 靈活性。 D3允許您獲取任何類型的數據，並將其與瀏覽器窗口中的形狀直接關聯。這些數據可以是絕對的>，允許大量有趣的用例創建完全原始的可視化。 優雅。在更新之間添加具有
    2. 平滑過渡>的交互式元素很容易。圖書館的書面形式是精美的
  2. ，一旦您掌握了語法，就可以很容易地保持代碼清潔和整潔。 > 社區。已經有一個龐大的生態系統，它已經使用了D3，他們很容易在線共享他們的代碼。您可以使用bl.ocks.org和blockbuilder.org等網站快速查找其他人的預先編寫代碼，並將這些摘要直接複製到您自己的項目中。 > 鑰匙要點
  3. 代表數據驅動的文檔的
    4. d3是一個強大的JavaScript庫，用於創建多樣化和交互式數據可視化，如它在紐約時報等平台中的廣泛使用所證明的。
庫提供了無與倫比的靈活性，使開發人員可以將任何類型的數據綁定到瀏覽器中的圖形表示，從而在可視化設計中促進創造力。

> d3在通過平穩過渡的添加交互式和動態元素方面表現出色，通過優雅的編程和語法增強視覺體驗和用戶參與。

    >一個強大的開發人員社區支持D3，在Bl.ocks.org等平台上提供了豐富的共享代碼和示例資源，可以利用這些代碼和項目開發。 該教程詳細介紹了收入分佈創新可視化的創建，利用D3的功能動態操縱和呈現數據，根據實際數據值調整視覺元素（例如餅圖半徑）。
  • 該項目通過借貸和調整現有代碼進行迭代開發，證明了D3的適應性和社區在編碼中的重要性，然後轉化為動態和交互式增強。
    • 最終的交互式可視化包括播放/暫停按鈕和用於年度選擇的滑塊等功能，說明瞭如何使用D3來使數據可視化不僅提供信息，而且可以吸引。
    • 項目
    • 作為大學的經濟學專業，我一直對收入不平等感興趣。我上了幾門關於這個主題的課程，這讓我感到震驚，因為它應該完全理解。
  • >我開始使用Google的公共數據資源管理器探索收入不平等……>

    • 調整通貨膨脹時，儘管每工業生產力一直在飆升，但家庭收入在40％的社會中保持了幾乎恆定的。它確實是最高的20％，它獲得了更多的好處（在該括號內，如果您看著前5％的前5％，那麼差異更加令人震驚）。

    這是我想以令人信服的方式傳播的信息，這為使用一些D3.js提供了絕佳的機會，所以我開始繪製一些想法。

    >

    素描

    因為我們正在與D3合作，所以我或多或少可以開始繪製我能想到的任何東西

    。製作簡單的線圖，條形圖或氣泡圖非常容易，但是我想做一些不同的東西。 >我發現人們傾向於用作對不平等問題的擔憂的最常見類比是“如果餡餅變大，那麼還有更多事情要解決”。直覺是，如果GDP的總份額在很大程度上增加了，那麼即使有些人獲得了pie的較薄

    ，但它們仍然會更好地

    > 🎜>。但是，正如我們所看到的，餡餅完全有可能變得更大和讓人們總體上變得更少。 我可視化這些數據的第一個想法看起來像這樣：

    的想法是，我們將擁有此脈動餅圖，每個切片代表美國收入分配的五分之一。每個派片的面積與該人口的收入收入有關，圖表的總面積將代表其總GDP。 但是，我很快遇到了一些問題。事實證明，人的大腦在區分不同區域的大小方面非常差。當我更具體地將其映射出來時，該消息並沒有像應該如此明顯的地方：>

    與現代JavaScript和D3的交互式數據可視化

    >在這裡，實際上，最貧窮的美國人隨著時間的流逝而變得更加富裕，這證實了似乎直覺上的真實。我再考慮這個問題，我的解決方案涉及保持每個弧的角度恆定的角度，每個弧的半徑動態變化。

    這是在實踐中最終尋找的方式：

    與現代JavaScript和D3的交互式數據可視化

    >我想指出，此圖像仍然傾向於低估這裡的效果。如果我們使用一個簡單的條形圖，效果將會更加明顯：

    但是，我致力於做出獨特的可視化，我想將此消息錘回回家，即

    pie 可以得到更大的> ，而ashare> share >它可以得到較小的。現在我有了我的主意，是時候用D3構建它了。 >

    >借用代碼

    >所以，現在我知道要構建什麼，是時候進入該項目的真正肉了，然後開始編寫一些代碼

    。 >您可能會認為我會從頭開始編寫我的前幾行代碼行，但是您錯了。這是D3，由於我們正在與D3合作，因此我們總是可以從社區中找到一些預先編寫的代碼，以使我們脫穎而出。 >

    >我們正在創建全新的東西，但是它與常規餅圖有很多共同點，因此我快速查看了bl.ocks.org，我決定使用Mike Bostock的經典實施， D3的創造者之一。該文件可能已經復制了數千次，而寫它的人是帶有JavaScript的真正嚮導，因此我們可以確定我們已經從一個不錯的代碼開始了。

    此文件寫在D3 V3中，該文件現在已經過時了兩個版本，因為版本5最終在上個月發布。 D3 V4的一個很大的變化是，庫切換到使用平坦的名稱空間，因此比例功能諸如d3.scale.ordinal（）的編寫一樣，就像d3.scaleordinal（）相反。在版本5中，最大的更改是，數據加載函數現在是按照承諾構造的，這使得更容易一次處理多個數據集。

    > 為了避免混亂，我已經遇到了創建此代碼的更新V5版本的麻煩，我已將其保存在blockbuilder.org上。我還將語法轉換為適合ES6慣例，例如將ES5匿名函數切換到箭頭函數。

    這是我們已經開始的：

    >

    然後，我將這些文件複製到我的工作目錄中，並確保我可以在自己的計算機上複製所有內容。如果您想自己跟隨本教程，那麼您可以從我們的GitHub倉庫中克隆該項目。您可以從文件啟動器.html中的代碼開始。請注意，您將需要一台服務器（例如該服務器）來運行此代碼，因為它依賴於Fetch API檢索數據。

    >讓我快速介紹此代碼的工作原理。

    瀏覽我們的代碼

    與現代JavaScript和D3的交互式數據可視化首先，我們在文件頂部聲明了一些常數，我們將使用該常數來定義餅圖的大小：

    >這使我們的代碼超級重複使用，因為如果我們想使其更大或更小，那麼我們只需要擔心在此處更改這些值。

    >

    接下來，我們將SVG畫布附加到屏幕上。如果您對SVG的了解不多，那麼您可以將畫布視為我們可以繪製形狀的頁面上的空間。如果我們嘗試在該區域之外繪製SVG，那麼它根本不會出現在屏幕上：> 

<span>const width = 540;
</span><span>const height = 540;
</span><span>const radius = Math.min(width, height) / 2;
</span>
>我們正在用圖表區域的ID抓住一個空的DIV，並致電D3.Select（）。我們還使用d3.append（）方法將SVG畫布附加，並且使用d3.attr（）方法為其寬度和高度設置了一些尺寸。

>我們還將SVG組元素附加到此畫布上，這是一種特殊類型的元素，我們可以將其用於將元素構造在一起。這使我們可以使用組元素的轉換屬性將整個可視化轉移到屏幕的中心。

之後，我們正在設置一個默認量表，我們將使用該量表來為我們的派的每一個分配新顏色：

>

接下來，我們有幾行設置了D3的派佈局：>

在D3中，佈局是我們可以在一組數據中調用的特殊功能。一個佈局函數以特定格式接收一系列數據，並使用一些自動生成的值吐出
<span>const svg = d3.select("#chart-area")
</span>  <span>.append("svg")
</span>    <span>.attr("width", width)
</span>    <span>.attr("height", height)
</span>  <span>.append("g")
</span>    <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
</span>
轉換的數組

，然後我們可以用。 然後，我們需要定義一個可以用來繪製弧的路徑生成器。路徑生成器允許我們在Web瀏覽器中繪製路徑SVG。 D3真正要做的就是將數據與屏幕上的形狀相關聯，但是在這種情況下，我們要定義更複雜的形狀，而不是簡單的圓或正方形。路徑SVG通過定義在之間繪製線路的路由來工作，我們可以使用其D屬性來定義。

這可能是：
<span>const color = d3.scaleOrdinal(["#66c2a5", "#fc8d62", "#8da0cb","#e78ac3", "#a6d854", "#ffd92f"]);
</span>
>

d屬性包含一個特殊的編碼，可以讓瀏覽器繪製我們想要的路徑。如果您真的想知道此字符串的含義，則可以在MDN的SVG文檔中找到它。對於D3中的編程，我們實際上不需要了解此特殊編碼的任何信息，因為我們的發電機會為我們吐出D屬性，我們只需要使用一些簡單的參數來初始化。 對於弧線，我們需要為我們的路徑發生器一個Innerradius和像素中的外段值，並且發電機將分類為我們計算每個角度的複雜數學：

>

對於我們的圖表，我們為Innerradius使用了零值，這為我們提供了標準的餅圖。但是，如果我們想繪製甜甜圈圖，那麼我們要做的就是插入一個小於我們的outerradius值的值。 
<span>const pie = d3.pie()
</span>  <span>.value(d => d.count)
</span>  <span>.sort(null);
</span>
>

>幾次函數聲明後，我們將使用d3.json（）函數加載數據：>

<span>const width = 540;
</span><span>const height = 540;
</span><span>const radius = Math.min(width, height) / 2;
</span>
在D3版本5.x中，呼叫d3.json（）返回諾言，這意味著D3將獲取它在我們給它的相對路徑上找到的JSON文件的內容，並執行該功能加載後，我們將在The The The The The The The（）方法中調用。然後，我們可以訪問我們在回調的數據參數中查看的對象。 >

>我們還在此處傳遞函數參考 - 類型 - 它將轉換我們加載成數的所有值，我們可以稍後使用：>

> 

<span>const svg = d3.select("#chart-area")
</span>  <span>.append("svg")
</span>    <span>.attr("width", width)
</span>    <span>.attr("height", height)
</span>  <span>.append("g")
</span>    <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
</span>
如果我們添加console.log（data）;向我們的d3.json回調的口頭聲明，我們可以查看我們現在正在使用的數據：>

我們的數據在這里分為兩個不同的數組，分別代表我們的蘋果和橘子數據。 
<span>const color = d3.scaleOrdinal(["#66c2a5", "#fc8d62", "#8da0cb","#e78ac3", "#a6d854", "#ffd92f"]);
</span>
>

>使用此行，我們將在單擊我們的一個無線電按鈕時切換我們正在查看的數據：

>

>我們還需要在可視化的第一次運行中調用update（）函數，以傳遞初始值（帶有“蘋果”數組）。 
<span>const pie = d3.pie()
</span>  <span>.value(d => d.count)
</span>  <span>.sort(null);
</span>

>讓我們看一下我們的update（）函數在做什麼。如果您是D3的新手，這可能會引起一些困惑，因為它是D3最困難的部分之一……> 
<span><span><span><svg</span> width<span>="190"</span> height<span>="160"</span>></span>
</span>  <span><span><span><path</span> d<span>="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"</span> stroke<span>="black"</span> fill<span>="transparent"</span>/></span>
</span><span><span><span></svg</span>></span>
</span>

>首先，我們使用默認函數參數作為值。如果我們將參數傳遞到我們的update（）函數（當我們第一次運行時），我們將使用該字符串，否則我們將從單擊事件中獲得所需的值我們的無線電輸入。

然後，我們正在使用D3中的常規更新模式
<span>const arc = d3.arc()
</span>  <span>.innerRadius(0)
</span>  <span>.outerRadius(radius);
</span>
來處理我們的弧的行為。這通常涉及執行數據加入，退出舊元素，更新屏幕上的現有元素，並添加添加到我們數據中的新元素。在此示例中，我們不必擔心退出元素，因為我們在屏幕上始終具有相同數量的餅片。

首先，有我們的數據加入：

>每次我們的可視化更新時，這都會將新的數據與我們的SVG在屏幕上關聯。我們將數據（“蘋果”或“橙色”的數組）傳遞到我們的PIE（）佈局函數中，該功能正在計算一些開始角度和端角，可用於繪製我們的弧線。現在，此路徑變量包含屏幕上所有弧的特殊

虛擬選擇

。 接下來，我們將更新數據數組中仍然存在的屏幕上的所有SVG。我們在此處添加了一個過渡 - D3庫的絕妙功能 - 傳播這些更新超過200毫秒：>

<span>const width = 540;
</span><span>const height = 540;
</span><span>const radius = Math.min(width, height) / 2;
</span>

>我們在d3.transition（）呼叫上使用attrtwien（）方法來定義D3應使用的自定義過渡，以更新其每個ARC的位置（使用D屬性過渡）。如果我們試圖將過渡到大多數屬性添加過渡，但是我們需要這樣做，但是我們需要這樣做以在不同的路徑之間過渡。 D3無法真正弄清楚如何在自定義路徑之間過渡，因此我們使用Arctween（）函數來讓D3知道如何在每時每刻都應繪製我們的每條路徑。

>

這是此功能的樣子：

<span>const svg = d3.select("#chart-area")
</span>  <span>.append("svg")
</span>    <span>.attr("width", width)
</span>    <span>.attr("height", height)
</span>  <span>.append("g")
</span>    <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
</span>

我們在此處使用d3.interpaly（）來創建所謂的插裝器。當我們調用我們存儲在I變量中的函數，值在0到1之間，我們將獲得一個介於此之間的值。 _current和a。在這種情況下，this._current是一個包含我們正在查看的PIE切片的開始和末端角度的對象，A表示我們正在更新為。

>一旦我們設置了插裝器，我們就會更新this._current值，以包含我們在末尾所擁有的值（i（a）），然後我們正在返回一個將計算計算的函數基於此t值，我們的弧應包含的路徑。我們的過渡將在其時鐘的每個刻度上運行此函數（通過0到1之間的參數），此代碼將意味著我們的過渡將在任何時間點都知道我們的弧線應在哪裡繪製。

>

>最後，我們的update（）函數需要添加在以前的數據陣列中沒有的新元素：>

這個代碼塊將設置我們每個弧的初始位置，這是第一次運行此更新功能。此處的Enter（）方法為我們提供了需要添加到屏幕中的所有元素，然後我們可以使用Attr（）方法循環瀏覽這些元素，以設置每個元素的填充和位置弧。我們還為每個弧線提供了一個白色邊框，這使我們的圖表看起來有些整潔。最後，我們將這些弧的每一個的current屬性設置為數據中的初始值，我們在arctween（）函數中使用。 
<span>const color = d3.scaleOrdinal(["#66c2a5", "#fc8d62", "#8da0cb","#e78ac3", "#a6d854", "#ffd92f"]);
</span>
>不用擔心您是否無法完全遵循它的工作原理，因為它是D3中的一個相當高級的話題。這個庫的偉大是，您不需要了解其所有內部工作，就可以用它創建一些強大的東西。只要您能理解需要更改的位，就可以抽像一些並不是完全必不可少的細節。

>

將我們帶到了過程中的下一步……

適應代碼

>現在我們在本地環境中有一些代碼，並且我們了解它在做什麼，我將切換我們正在查看的數據，以便它可以與我們感興趣的數據一起使用。

>我已經包含了我們將在項目的數據/文件夾中使用的數據。由於此新的incomes.csv文件這次是CSV格式（這是可以使用Microsoft Excel打開的文件），因此我將使用d3.csv（）函數，而不是D3.json（ ）函數：

<span>const width = 540;
</span><span>const height = 540;
</span><span>const radius = Math.min(width, height) / 2;
</span>

此函數基本上與D3.json（）基本相同 - 將我們的數據轉換為我們可以使用的格式。我還將type（）initializer函數作為這裡的第二個參數刪除，因為這是我們舊數據的特定於。

>如果將Console.Log（Data）語句添加到D3.CSV回調的頂部，則可以看到我們正在使用的數據的形狀：>

>我們有50個項目的數組，每個項目都代表我們的數據一年。然後，我們每年都有一個對象，其中五個收入組中的每個集團以及其他一些領域都有數據。我們可以在這裡創建一個餅圖，這是這些年之一，但是首先，我們需要稍微繞過我們的數據，以便以正確的格式。當我們想編寫與D3連接的數據時，我們需要傳遞一個數組，每個項目都將綁定到SVG。 
<span>const svg = d3.select("#chart-area")
</span>  <span>.append("svg")
</span>    <span>.attr("width", width)
</span>    <span>.attr("height", height)
</span>  <span>.append("g")
</span>    <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
</span>
回想一下，在我們的最後一個示例中，我們有一個數組，其中包含一個項目，適用於要在屏幕上顯示的每個派。將此與我們目前擁有的東西進行比較，這是一個對象，其鑰匙為1至5，代表我們要繪製的每個派。

> 為了解決此問題，我將添加一個稱為repardata（）的新函數以替換我們以前擁有的type（）函數，該功能將在加載時迭代我們的每個數據：>

>每年，此功能將返回具有值數組的對象，我們將將其傳遞到我們的數據加入中。我們將這些值中的每一個都標記為名稱字段，並且根據我們已經擁有的收入價值，我們為它們提供了數值。我們還在跟踪比較每年的平均收入。

>在這一點上，我們的數據格式可以使用：

> 
<span>const color = d3.scaleOrdinal(["#66c2a5", "#fc8d62", "#8da0cb","#e78ac3", "#a6d854", "#ffd92f"]);
</span>

>我將在數據中的第一年生成圖表，然後我會擔心在剩下的幾年中更新它。

>

>目前，我們的數據始於2015年，在1967年結束，因此我們需要扭轉此數組，然後才能做其他任何事情：

<span>const pie = d3.pie()
</span>  <span>.value(d => d.count)
</span>  <span>.sort(null);
</span>

與普通餅圖不同，對於我們的圖形，我們要固定每個弧的角度，並且隨著可視化更新的變化，半徑更改。為此，我們將更改PIE佈局上的Value（）方法，以便每個派slice始終具有相同的角度：

<span>const width = 540;
</span><span>const height = 540;
</span><span>const radius = Math.min(width, height) / 2;
</span>
接下來，每次可視化更新時，我們都需要更新半徑。為此，我們需要提出一個可以使用的量表。比例尺是D3中的一個函數，在兩個值之間採用

input 輸入，我們作為域傳遞，然後在兩個不同的值之間吐出>輸出作為範圍。這是我們將使用的規模：

> 
<span>const svg = d3.select("#chart-area")
</span>  <span>.append("svg")
</span>    <span>.attr("width", width)
</span>    <span>.attr("height", height)
</span>  <span>.append("g")
</span>    <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
</span>

>一旦我們可以訪問數據，我們就會添加這個量表，我們說我們的投入應在0到我們數據集中最大的價值之間，這是去年最富有的群體的收入在我們的數據中（數據[49]。值[4]。值）。對於域，我們設置了我們的輸出值應範圍的間隔。

這意味著零的輸入應給我們一個像素值為零，並且數據中最大值的輸入應為我們提供寬度或高度值的一半值，以較小。 >

請注意，我們還在此處使用

平方的根刻度

。我們這樣做的原因是，我們希望我們的餡餅切片區域與每個小組的收入成正比，而不是半徑。由於區域=πr2>，我們需要使用平方根刻度來解釋這一點。 然後，我們可以使用此量表來更新Update（）函數中的ARC Generator的Outerradius值：>

>每當我們的數據更改時，這將編輯我們要用於每個弧線的半徑值。

>當我們最初設置弧發生器時，我們還應該刪除對Outerradius的呼叫，以便我們將其放在文件的頂部：
<span>const color = d3.scaleOrdinal(["#66c2a5", "#fc8d62", "#8da0cb","#e78ac3", "#a6d854", "#ffd92f"]);
</span>
>

>最後，我們需要對此update（）函數進行一些編輯，以便所有內容都與我們的新數據相匹配：>

>由於我們不再使用我們的收音機按鈕，所以我只是通過致電我們要使用的年度對象：
<span>const pie = d3.pie()
</span>  <span>.value(d => d.count)
</span>  <span>.sort(null);
</span>

>最後，我將刪除我們為表單輸入設置的事件偵聽器。如果一切都計劃在計劃中，我們的數據中應該有一張漂亮的圖表：> 
<span><span><span><svg</span> width<span>="190"</span> height<span>="160"</span>></span>
</span>  <span><span><span><path</span> d<span>="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"</span> stroke<span>="black"</span> fill<span>="transparent"</span>/></span>
</span><span><span><span></svg</span>></span>
</span>

<span>const arc = d3.arc()
</span>  <span>.innerRadius(0)
</span>  <span>.outerRadius(radius);
</span>
使其動態

下一步是在不同年份之間擁有我們的可視化週期，以表明收入如何隨著時間的流逝而變化。我們將通過添加呼叫JavaScript的setInterval（）函數來做到這一點，我們可以用它來重複執行某些代碼：

> 與現代JavaScript和D3的交互式數據可視化

>我們在此時間變量中設置了一個計時器，每200ms，此代碼將運行step（）函數，該函數將將我們的圖表更新為明年的數據，並將計時器遞增1。如果計時器它的價值為49（我們的數據中的最後一年），它將自身重置。現在，這為我們提供了一個不錯的循環，它將連續運行：

與現代JavaScript和D3的交互式數據可視化

使事情更有用。我還將添加一些標籤，這些標籤為我們提供了原始數字。我將用以下方式替換文件正文中的所有HTML代碼 

<span>const width = 540;
</span><span>const height = 540;
</span><span>const radius = Math.min(width, height) / 2;
</span>
>我們正在使用Bootstrap的網格系統在此處構建頁面，這使我們可以將頁面元素整潔地格式化為框。

然後，每當我們的數據更改時，我將使用jQuery更新所有這些：>

>我還將對我們文件頂部的CSS進行一些編輯，這將為我們提供每個弧的傳奇，並以我們的標題為中心：> 

<span>const svg = d3.select("#chart-area")
</span>  <span>.append("svg")
</span>    <span>.attr("width", width)
</span>    <span>.attr("height", height)
</span>  <span>.append("g")
</span>    <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
</span>
我們最終得到的是相當可觀的東西：

<span>const color = d3.scaleOrdinal(["#66c2a5", "#fc8d62", "#8da0cb","#e78ac3", "#a6d854", "#ffd92f"]);
</span>

>很難看到這些弧線隨著時間的推移如何變化，所以我想添加一些網格線來顯示我們數據第一年的收入分佈的樣子：>

與現代JavaScript和D3的交互式數據可視化>我正在使用array.foreach（）方法來完成此操作，儘管我也可以再次使用D3的常規

常規更新模式

（join/exit/exit/extim/update/enter）。

> 
<span>const pie = d3.pie()
</span>  <span>.value(d => d.count)
</span>  <span>.sort(null);
</span>
>我還想添加一行以顯示美國的平均收入，我每年都會更新。首先，我將首次添加平均線：

> >然後，我將在UPDATE（）函數的末尾更新此版本。

>我應該注意，對於我們來說，在我們的第一個call to Update（）之後，添加每個圓圈

很重要，因為否則它們最終會在每個圈子後面渲染
<span><span><span><svg</span> width<span>="190"</span> height<span>="160"</span>></span>
</span>  <span><span><span><path</span> d<span>="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"</span> stroke<span>="black"</span> fill<span>="transparent"</span>/></span>
</span><span><span><span></svg</span>></span>
</span>
>

>我們的弧路徑（SVG層取決於將它們添加到屏幕的順序，而不是通過其z索引）。

>在這一點上，我們有一些傳達我們正在使用的數據，這些數據更清楚地：
<span>const arc = d3.arc()
</span>  <span>.innerRadius(0)
</span>  <span>.outerRadius(radius);
</span>
>

使其互動

作為最後一步，我希望我們添加一些控件，以使用戶挖掘到特定年份。我想添加a

play/暫停

按鈕，以及一年的滑塊，允許用戶選擇特定的日期來查看。

與現代JavaScript和D3的交互式數據可視化>這是我用來將這些元素添加到屏幕上的HTML：>

>我們需要在這兩個元素中添加一些事件聽眾，以設計我們要尋找的行為。

首先，我想定義我們的按鈕的行為。我們需要替換提前為間隔編寫的代碼，以便我們使用按鈕停止並啟動計時器。我假設可視化始於“暫停”狀態，我們需要按下此按鈕以拉開序幕。 
<span>const width = 540;
</span><span>const height = 540;
</span><span>const radius = Math.min(width, height) / 2;
</span>

>每當我們的按鈕單擊時，我們的if/else block在這裡將定義不同的行為，具體取決於我們的按鈕是“播放”按鈕還是“暫停”按鈕。如果我們單擊的按鈕說“播放”，我們將按鈕更改為“暫停”按鈕，然後開始我們的間隔循環。另外，如果按鈕是“暫停”按鈕，我們將其文本更改為“ play”，我們將使用clearInterval（）函數來阻止循環運行。

>

對於我們的滑塊，我想使用jQuery UI庫隨附的滑塊。我將其包含在我們的HTML中，並且我將寫幾行以將其添加到屏幕上：> 

<span>const svg = d3.select("#chart-area")
</span>  <span>.append("svg")
</span>    <span>.attr("width", width)
</span>    <span>.attr("height", height)
</span>  <span>.append("g")
</span>    <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
</span>
>在這裡，我們使用幻燈片選項將事件偵聽器連接到滑塊。每當我們的滑塊轉移到另一個值時，我們都會將計時器更新到此新值，並且在當年的數據中運行了Update（）函數。

>我們可以在Update（）函數末尾添加此行，以便我們的滑塊移動到我們的循環運行時正確的一年：

>我還將在我們的UpdateHtml（）函數（每當我們的可視化更改時運行）添加一行，該功能可以根據數據中的當年調整標籤的值 
<span>const color = d3.scaleOrdinal(["#66c2a5", "#fc8d62", "#8da0cb","#e78ac3", "#a6d854", "#ffd92f"]);
</span>

>我將向我們的CSS扔幾行，以使一切看起來有些整潔： 

<span>const pie = d3.pie()
</span>  <span>.value(d => d.count)
</span>  <span>.sort(null);
</span>
>我們擁有它 - 我們的成品 - 一個功能齊全的交互式數據可視化，一切都按預期工作。 

<span><span><span><svg</span> width<span>="190"</span> height<span>="160"</span>></span>
</span>  <span><span><span><path</span> d<span>="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"</span> stroke<span>="black"</span> fill<span>="transparent"</span>/></span>
</span><span><span><span></svg</span>></span>
</span>

希望，本教程展示了D3的真實力量，讓您絕對創建任何您可以想像的東西。

>從頭開始始終是一個艱難的過程，但是獎勵值得。如果您想學習如何創建自己的自定義可視化，這裡有一些在線資源，您可能會發現有幫助：與現代JavaScript和D3的交互式數據可視化>

  • > SitePoint的D3.js內容的概述
  • > D3主頁上的圖書館簡介。這是通過一些最基本的命令運行的，向您展示瞭如何在D3中進行第一個步驟。
    • >
  • >“讓我們製作條形圖” Mike Bostock（D3的創建者） - 向初學者展示瞭如何製作圖書館中最簡單的圖表之一。 Elijah Meeks（$ 35）的
    • d3.js，這是一本可靠的介紹性教科書。 D3的Slack頻道非常歡迎D3的新移民。它還有一個“學習材料”部分，並收集了大量資源。
  • >
    • >此在線Udemy課程（20美元），該課程涵蓋了圖書館中的所有內容。這針對JavaScript開發人員，包括四個很酷的項目。
  • 在bl.ocks.org和blockbuilder.org。
    • D3 API參考，它對D3提供的所有內容提供了詳盡的技術解釋。
    • >不要忘記，如果您想查看我在文章中使用的代碼的完成版本，那麼您可以在我們的GitHub repo上找到它。
  • >
    • >與JavaScript和D3
  • >的交互式數據可視化的經常詢問問題（常見問題解答）
    • > D3在交互式數據可視化中的意義是什麼？
d3（代表數據驅動的文檔）是一個JavaScript庫，該庫是廣泛用於創建交互式數據可視化的JavaScript庫。它允許您將任意數據綁定到文檔對像模型（DOM），然後將數據驅動的轉換應用於文檔。 D3不是一個單層框架，它試圖提供所有可以想像的功能。取而代之的是，它解決了問題的關鍵：根據數據有效操縱文檔。這避免了專有表示形式，並具有非凡的靈活性，揭示了HTML，SVG和CSS等網絡標準的全部功能。

> D3與其他JavaScript庫有何不同？之所以獨特，是因為它使您可以靈活地創建其他庫無法使用的數據可視化。它使您可以直接操縱DOM，這意味著您可以完全控制可視化的最終外觀。 D3還使用聲明的方法，這意味著您定義了想要最終結果的外觀，而D3算出瞭如何到達那裡。

>

我可以將D3用於大數據集嗎？是的，D3能夠處理大型且複雜的數據集。它具有強大的數據操作功能，可讓您以任何格式使用數據。 D3還具有用於從不同來源加載數據的內置功能，使其更容易與您的現有數據基礎結構集成。 >

>如何使我的D3可視化互動互動？

> d3提供了幾種將交互性添加到可視化的方法。您可以使用事件偵聽器響應諸如點擊或鼠標運動之類的用戶操作，並且可以使用過渡來對數據進行動畫更改。 D3還支持縮放和平移，這對於探索大型數據集可能很有​​用。

>

>在廣泛的領域中，從新聞到新聞業到D3？商業科學。一些常見的用例包括創建交互式圖，構建動態圖表和圖形，可視化複雜的網絡以及創建自定義數據驅動的動畫。

我是否需要知道Javascript來使用D3？ ，對JavaScript有效使用D3是必要的。 D3是一個JavaScript庫，因此您需要編寫JavaScript代碼來創建可視化。但是，D3的API旨在直觀且易於學習，因此，即使您不是JavaScript專家，您仍然可以使用D3創建強大的可視化。是的，可以與其他JavaScript庫或框架一起使用D3。例如，您可以使用D3來創建使用React或Angular。非常適合實時數據可視化。它具有靈活的數據更新機制，可讓您在新數據進來時輕鬆更新可視化。這使D3成為儀表板或實時數據饋送等應用程序的絕佳選擇。

>我如何學習D3？ >

>有許多可用於學習D3的資源。 D3官方網站有大量的文檔和示例，並且有許多在線教程和課程深度涵蓋D3。練習也是關鍵 - 您使用D3越多，您的概念和API都會變得越舒適。

> d3？

是什麼限制，而d3是一個強大的工具，它確實有一些局限性。它需要對JavaScript和Web標準有很好的了解，這可能是初學者的障礙。 D3還為開發人員留下了很多決定，如果您不確定從哪裡開始，這可能會令人不知所措。最後，儘管D3能夠處理大型數據集，但性能可能會成為一個非常大或複雜的可視化的問題。

以上是與現代JavaScript和D3的交互式數據可視化的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript json jquery css bootstrap less html es6 angular String Array Object Resource define if switch sort for while foreach select date format include try throw Directory using public Namespace finally Attribute Property Event Collection append copy channel JS console number function default dom this promise display position border transform transition canvas input github idea kind microsoft ui issue everything Access excel Other
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：Node.js應用程序的護照身份驗證下一篇：Node.js應用程序的護照身份驗證

相關文章

看更多