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

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

>

1. 靈活性。 D3允許您獲取任何類型的數(shù)據(jù)，并將其與瀏覽器窗口中的形狀直接關聯(lián)。這些數(shù)據(jù)可以是絕對的>，允許大量有趣的用例創(chuàng)建完全原始的可視化。 優(yōu)雅。在更新之間添加具有
平滑過渡>的交互式元素很容易。圖書館的書面形式是精美的
2. ，一旦您掌握了語法，就可以很容易地保持代碼清潔和整潔。> 社區(qū)。已經(jīng)有一個龐大的生態(tài)系統(tǒng)，它已經(jīng)使用了D3，他們很容易在線共享他們的代碼。您可以使用bl.ocks.org和blockbuilder.org等網(wǎng)站快速查找其他人的預先編寫代碼，并將這些摘要直接復制到您自己的項目中。> 鑰匙要點
3. 代表數(shù)據(jù)驅(qū)動的文檔的
d3是一個強大的JavaScript庫，用于創(chuàng)建多樣化和交互式數(shù)據(jù)可視化，如它在紐約時報等平臺中的廣泛使用所證明的。

> d3在通過平穩(wěn)過渡的添加交互式和動態(tài)元素方面表現(xiàn)出色，通過優(yōu)雅的編程和語法增強視覺體驗和用戶參與。

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

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

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

>

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

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

，但它們?nèi)匀粫玫?p>> ??>。但是，正如我們所看到的，餡餅完全有可能變得更大和讓人們總體上變得更少。 我可視化這些數(shù)據(jù)的第一個想法看起來像這樣：

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



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

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



>我想指出，此圖像仍然傾向于低估這里的效果。如果我們使用一個簡單的條形圖，效果將會更加明顯：
但是，我致力于做出獨特的可視化，我想將此消息錘回回家，即

pie 可以得到更大的> ，而ashare> share>它可以得到較小的?，F(xiàn)在我有了我的主意，是時候用D3構建它了。>

>借用代碼
>所以，現(xiàn)在我知道要構建什么，是時候進入該項目的真正肉了，然后開始編寫一些代碼

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

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

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

> 為了避免混亂，我已經(jīng)遇到了創(chuàng)建此代碼的更新V5版本的麻煩，我已將其保存在blockbuilder.org上。我還將語法轉(zhuǎn)換為適合ES6慣例，例如將ES5匿名函數(shù)切換到箭頭函數(shù)。
這是我們已經(jīng)開始的：

>

然后，我將這些文件復制到我的工作目錄中，并確保我可以在自己的計算機上復制所有內(nèi)容。如果您想自己跟隨本教程，那么您可以從我們的GitHub倉庫中克隆該項目。您可以從文件啟動器.html中的代碼開始。請注意，您將需要一臺服務器（例如該服務器）來運行此代碼，因為它依賴于Fetch API檢索數(shù)據(jù)。

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

瀏覽我們的代碼

首先，我們在文件頂部聲明了一些常數(shù)，我們將使用該常數(shù)來定義餅圖的大?。?/p>

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

>

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

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

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

>

接下來，我們有幾行設置了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真正要做的就是將數(shù)據(jù)與屏幕上的形狀相關聯(lián)，但是在這種情況下，我們要定義更復雜的形狀，而不是簡單的圓或正方形。路徑SVG通過定義在之間繪制線路的路由來工作，我們可以使用其D屬性來定義。

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

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

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

>幾次函數(shù)聲明后，我們將使用d3.json（）函數(shù)加載數(shù)據(jù)：>

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

<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>

<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>

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

<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>

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

<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>

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

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

<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>

<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>

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

<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>

<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>

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

<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>

<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>

以上是與現(xiàn)代JavaScript和D3的交互式數(shù)據(jù)可視化的詳細內(nèi)容。更多信息請關注PHP中文網(wǎng)其他相關文章！