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

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

>

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

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

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

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

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

>

素描
因?yàn)槲覀冋谂cD3合作，所以我或多或少可以開(kāi)始繪制我能想到的任何東西

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

，但它們?nèi)匀粫?huì)更好地

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

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



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

這是在實(shí)踐中最終尋找的方式：



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

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

>借用代碼
>所以，現(xiàn)在我知道要構(gòu)建什么，是時(shí)候進(jìn)入該項(xiàng)目的真正肉了，然后開(kāi)始編寫(xiě)一些代碼

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

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

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

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

>

然后，我將這些文件復(fù)制到我的工作目錄中，并確保我可以在自己的計(jì)算機(jī)上復(fù)制所有內(nèi)容。如果您想自己跟隨本教程，那么您可以從我們的GitHub倉(cāng)庫(kù)中克隆該項(xiàng)目。您可以從文件啟動(dòng)器.html中的代碼開(kāi)始。請(qǐng)注意，您將需要一臺(tái)服務(wù)器（例如該服務(wù)器）來(lái)運(yùn)行此代碼，因?yàn)樗蕾囉贔etch API檢索數(shù)據(jù)。

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

瀏覽我們的代碼

首先，我們?cè)谖募敳柯暶髁艘恍┏?shù)，我們將使用該常數(shù)來(lái)定義餅圖的大?。?/p>

>這使我們的代碼超級(jí)重復(fù)使用，因?yàn)槿绻覀兿胧蛊涓蠡蚋?，那么我們只需要?dān)心在此處更改這些值。

>

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

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

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

>

接下來(lái)，我們有幾行設(shè)置了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>

，然后我們可以用。 然后，我們需要定義一個(gè)可以用來(lái)繪制弧的路徑生成器。路徑生成器允許我們?cè)赪eb瀏覽器中繪制路徑SVG。 D3真正要做的就是將數(shù)據(jù)與屏幕上的形狀相關(guān)聯(lián)，但是在這種情況下，我們要定義更復(fù)雜的形狀，而不是簡(jiǎn)單的圓或正方形。路徑SVG通過(guò)定義在之間繪制線路的路由來(lái)工作，我們可以使用其D屬性來(lái)定義。

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

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

<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ù)可視化的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！