當(dāng)前內(nèi)容所在位置

• 第一部分 D3.js 基礎(chǔ)知識(shí)
  • 第一章 D3.js 簡(jiǎn)介（已完結(jié)）
    • 1.1 何為 D3.js？
    • 1.2 D3 生態(tài)系統(tǒng)——入門(mén)須知
    • 1.3 數(shù)據(jù)可視化最佳實(shí)踐（上）
    • 1.3 數(shù)據(jù)可視化最佳實(shí)踐（下）
    • 1.4 本章小結(jié)
  • 第二章 DOM 的操作方法（已完結(jié)）
    • 2.1 第一個(gè) D3 可視化圖表
    • 2.2 環(huán)境準(zhǔn)備
    • 2.3 用 D3 選中頁(yè)面元素
    • 2.4 向選擇集添加元素
    • 2.5 用 D3 設(shè)置與修改元素屬性
    • 2.6 用 D3 設(shè)置與修改元素樣式 ??
    • 2.7 本章小結(jié) ??

2.6 用 D3 設(shè)置與修改元素樣式

為了讓可視化元素?fù)碛邢胍耐庥^和感覺(jué)，需要為其設(shè)置樣式。使用傳統(tǒng)的 CSS 樣式表就是一種不錯(cuò)的方案，通常也是考慮后期可維護(hù)性時(shí)的優(yōu)先方案。但有時(shí)直接使用 D3 來(lái)設(shè)置與修改樣式屬性同樣很方便，尤其是在樣式隨數(shù)據(jù)動(dòng)態(tài)變化的時(shí)候。

D3 通過(guò) selection.style() 方法設(shè)置與修改元素的樣式屬性（attribute）。該方法需要兩個(gè)參數(shù)：樣式屬性的名稱(chēng)及其屬性值，如圖 2.16 所示：

圖 2.16 style() 方法

回到條形圖示例，在 main.js 中，在 SVG 容器選擇集上鏈?zhǔn)秸{(diào)用 style() 方法，即賦值到常量 svg 上的方法。如以下代碼所示，使用 style() 方法為 SVG 容器應(yīng)用邊框樣式，可以賦值為任何想要的屬性值。本例中使用簡(jiǎn)寫(xiě)樣式，設(shè)置一個(gè)寬度 1px 的黑色邊框：

const svg = d3.select(".responsive-svg-container").append("svg").attr("viewBox", "0 0 1200 1600").style("border", "1px solid black");

SVG 容器四周的邊框有助于直觀了解當(dāng)前所處的空間區(qū)域，并理解 style() 方法的工作原理。

保存項(xiàng)目并在瀏覽器中查看效果。從 DOM 檢查工具中找到 SVG 容器，可以看到 border 屬性（property）被添加到了 style 屬性（attribute）中，如圖 2.17 所示。也就是說(shuō) style() 方法注入了所謂的行內(nèi)樣式。

圖 2.17 使用 style() 方法生效的邊框樣式

在處理 SVG 元素時(shí)，有些樣式可以通過(guò) attribute 屬性或行內(nèi)樣式來(lái)生效，例如 fill 和 stroke 屬性（properties）。至于應(yīng)該使用 attr() 還是 style() 方法來(lái)設(shè)置樣式并沒(méi)有嚴(yán)格的規(guī)定，但一些開(kāi)發(fā)人員更愿意保持一致，始終使用 CSS 樣式表樣式（或行內(nèi)樣式）來(lái)設(shè)置樣式，而不是通過(guò)元素的 attribute 屬性。這也許是一個(gè)不錯(cuò)的做法，尤其是在我們希望分開(kāi)創(chuàng)建形狀的代碼與設(shè)置外觀的代碼、使得層疊樣式更易于管理的時(shí)候。本書(shū)將使用 attr() 和 style() 方法以及外部 CSS 文件來(lái)設(shè)置 SVG 元素的視覺(jué)屬性。

例如，在 main.js 中，在矩形選擇集上調(diào)用 style() 方法，并對(duì)該矩形設(shè)置與之前不同的填充色 "plum"，如以下代碼所示：

svg.append("rect").attr("x", 10).attr("y", 10).attr("width", 414).attr("height", 16).attr("fill", "turquoise").style("fill", "plum");

然后打開(kāi) main.css 文件，為該矩形添加第三個(gè) fill 屬性（property），令其顏色值為 "orange"：

rect {fill: orange;
}

此時(shí)該矩形擁有三種不同的填充樣式：一個(gè)是通過(guò)元素 attribute 屬性設(shè)置的青綠色 "turquoise"；一個(gè)是通過(guò)行內(nèi)樣式應(yīng)用設(shè)置的深紫色 "plum"；最后是通過(guò)外部 CSS 樣式設(shè)置的橙黃色 "orange"。當(dāng)然，實(shí)際工作不會(huì)這樣設(shè)置，本例僅供演示。

保存項(xiàng)目，注意觀察借助 style 屬性設(shè)置的 fill 樣式是如何覆蓋另兩種樣式的。在圖 2.18 中，您可以看到樣式中的層疊規(guī)則是如何生效的：行內(nèi)樣式覆蓋了其余樣式，其次是外部 CSS 樣式表設(shè)置的樣式，最后是通過(guò) attribute 屬性設(shè)置的 fill 樣式。牢記這一規(guī)則將有助于制定適合自己習(xí)慣、團(tuán)隊(duì)和項(xiàng)目的策略，同時(shí)也可以在遇到下面的問(wèn)題時(shí)擺脫百思不得其解的窘境：為什么這種樣式在屏幕上可見(jiàn)、而另一種偏偏就不可見(jiàn)呢？

圖 2.18 填充樣式 fill 同時(shí)在 attribute 屬性、外部樣式表及行內(nèi)樣式應(yīng)用的效果對(duì)比

至此，我們已經(jīng)知道如何獲取選擇集、如何在 DOM 中添加元素、以及如何給這些元素設(shè)置方位與樣式。但是，真要像示例這樣逐一添加條形圖的各個(gè)矩形條，效率肯定高不了。等下一章學(xué)了數(shù)據(jù)綁定的相關(guān)知識(shí)后，就能一次性添加所有的矩形條了。在此之前，需要?jiǎng)h除 main.js 和 main.css 中與矩形相關(guān)的代碼，讓 main.js 文件只包含如下所示的代碼。第三章將從這里開(kāi)始構(gòu)建條形圖：

代碼清單 2.2 本章結(jié)束時(shí) main.js 的代碼內(nèi)容

const svg = d3.select(".responsive-svg-container").append("svg").attr("viewBox", "0 0 1200 1600").style("border", "1px solid black");

人物專(zhuān)訪：納迪?！げ祭啄?#xff08;Nadieh Bremer）

納迪埃·布雷默 是一位數(shù)據(jù)可視化藝術(shù)家。

【問(wèn)】能否介紹一下您的背景，以及您是如何進(jìn)入數(shù)據(jù)可視化領(lǐng)域的？

【Nadieh】 我畢業(yè)時(shí)是一名天文學(xué)家，之后開(kāi)始從事數(shù)據(jù)科學(xué)方面的工作。然而，幾年后，我意識(shí)到自己缺少了工作中富有創(chuàng)意的一面。當(dāng)我看到別人稱(chēng)他們自己為“數(shù)據(jù)可視化專(zhuān)家”時(shí)，我立刻意識(shí)到這正是我可以兼顧的地方：在調(diào)查數(shù)據(jù)、探尋故事、玩轉(zhuǎn)數(shù)學(xué)的同時(shí)發(fā)揮自己的創(chuàng)造力。

【問(wèn)】在沒(méi)有 Web 開(kāi)發(fā)背景的情況下，是什么促使您學(xué)習(xí) D3？遇到的主要挑戰(zhàn)是什么，又是如何克服的呢？

【Nadieh】 我參加了一次 D3.js 研討會(huì)（2013 年），會(huì)上人們展示了包括交互在內(nèi)的 D3 的各種可能性。尤其是在當(dāng)時(shí)，我從未見(jiàn)過(guò)這樣的新事物，我知道自己也想創(chuàng)建出這樣的交互式數(shù)據(jù)可視化效果。于是便買(mǎi)了一本斯科特·穆雷（Scott Murray）寫(xiě)的書(shū)《網(wǎng)絡(luò)交互式數(shù)據(jù)可視化》（Interactive Data Visualization for the Web，O’Reilly，2017 年），并從那本書(shū)開(kāi)始了 D3 的學(xué)習(xí)。當(dāng)時(shí)面臨的主要挑戰(zhàn)是，HTML / CSS / JavaScript 對(duì)我來(lái)說(shuō)都是全新的（盡管我知道如何用 R 語(yǔ)言編程）。因此除了 D3 外，我還必須學(xué)習(xí)這些語(yǔ)言；而且，由于我的無(wú)知，我都不知道 D3 的獨(dú)特之處在哪兒，什么又叫原生 JavaScript（vanilla JavaScript），以致于常常會(huì)被卡在一些細(xì)枝末節(jié)上，不知道如何從網(wǎng)上搜索答案?？偟膩?lái)說(shuō)，憑借極致的毅力，并確信當(dāng)時(shí)所從事的是自己真正熱衷的項(xiàng)目，才讓我最終堅(jiān)持了下來(lái)。不知不覺(jué)地，我對(duì)這些知識(shí)的理解也越來(lái)越透徹。我花了整整一年的時(shí)間才理解了 D3 的“進(jìn)入-更新-退出”（enter-update-exit）流程，哈哈。

【問(wèn)】除了 D3，您還使用其他可視化工具嗎？D3 在您當(dāng)前的數(shù)據(jù)可視化工作流程中處于什么位置？我看到您在項(xiàng)目中經(jīng)常用到 R 語(yǔ)言。

【Nadieh】 D3 確實(shí)是我的主要工具。我 90% 的數(shù)據(jù)可視化項(xiàng)目都會(huì)在開(kāi)始制作最終視覺(jué)效果時(shí)加載 D3。此外，我還會(huì)使用 JavaScript 和其他一些庫(kù)，如用于處理顏色的 Chroma.js 以及用于處理噪聲函數(shù)（noise functions）的 SimplexNoise。我總是先用 R 語(yǔ)言進(jìn)行數(shù)據(jù)分析和數(shù)據(jù)準(zhǔn)備，創(chuàng)建大量簡(jiǎn)單的圖表，以便對(duì)這些數(shù)據(jù)產(chǎn)生獨(dú)到而深入的理解。但我從不把這些圖表作為最終的視覺(jué)效果。

• Nadieh 精品項(xiàng)目《太空大戰(zhàn)》（www.visualcinnamon.com/portfolio/space-wars/）

發(fā)表在《科學(xué)美國(guó)人》雜志的納迪埃·布雷默的作品《太空衛(wèi)星的可視化效果》（Visualization of satellites in space)

【問(wèn)】再來(lái)聊聊您為 2020 年 11 月版的《科學(xué)美國(guó)人》創(chuàng)作的《太空大戰(zhàn)》這部作品吧？

【Nadieh】 《太空大戰(zhàn)》可視化展示了（當(dāng)時(shí)）仍在太空中活動(dòng)的所有衛(wèi)星情況，主要目的是為了顯示誰(shuí)擁有這些衛(wèi)星、以及可以在哪些軌道上找到它們。通過(guò)將每顆衛(wèi)星視為單獨(dú)的小圓圈，再按國(guó)家和軌道進(jìn)行分組，可以非常直觀地展示衛(wèi)星本身的詳細(xì)情況，如重量、年限、所屬分類(lèi)等等。

【問(wèn)】能再介紹一下這個(gè)項(xiàng)目的創(chuàng)作過(guò)程嗎？

【Nadieh】 幸好數(shù)據(jù)是由一位衛(wèi)星專(zhuān)家收集的，所以我不需要做任何數(shù)據(jù)處理，只需要進(jìn)行一些數(shù)據(jù)分析，就能了解我所掌握的情況。我在一個(gè)小冊(cè)子上記錄了一些想法。我知道要在國(guó)家和軌道分類(lèi)上做文章。不過(guò)，關(guān)于每顆衛(wèi)星的元數(shù)據(jù)實(shí)在太多，只能分別展示每顆衛(wèi)星。也不知道從哪里冒出來(lái)的想法，但在某個(gè)時(shí)刻，我繪制了一幅用圓圈表示衛(wèi)星的樹(shù)形地圖。當(dāng)最初的想法逐漸明晰起來(lái)后，剩下的工作就分成了兩個(gè)部分：一個(gè)是技術(shù)部分——如何在樹(shù)形地圖中使用圓圈；另一個(gè)是如何讓整體設(shè)計(jì)看起來(lái)更美觀。一開(kāi)始效果看起來(lái)很糟糕，但后來(lái)我花了一些時(shí)間從最喜歡的科幻電影中尋找色彩靈感，才找到真正想要的視覺(jué)效果。

【問(wèn)】在外人看來(lái)，您似乎是將 D3 的樹(shù)形圖的繪制手法與力導(dǎo)向圖的布局相結(jié)合來(lái)生成這種可視化效果的，是這樣嗎？將不同模塊的方法有機(jī)結(jié)合來(lái)創(chuàng)建前所未見(jiàn)的布局效果，這也是我最喜歡 D3 的原因之一。看了您在 Skillshare 平臺(tái)的主講課程《數(shù)據(jù)可視化：通過(guò)自定義圖表獲得美感與影響力》（Data Visualization: Customizing Charts for Beauty & Impact），里面也建議大家組合不同類(lèi)型的圖表。

【Nadieh】 沒(méi)錯(cuò)，就是這樣。我利用樹(shù)形地圖的方法來(lái)獲取每組衛(wèi)星的預(yù)定區(qū)域（用 x、y 坐標(biāo)和寬度、高度來(lái)描述）。然后，在每個(gè)矩形區(qū)域內(nèi)用力導(dǎo)向圖的布局來(lái)進(jìn)行模擬，以便對(duì)所有的圓進(jìn)行定位，確保它們不會(huì)相互重疊。想要知道樹(shù)狀地圖的每個(gè)方框的合理大小，需要用每個(gè)圓的表面積（與衛(wèi)星重量成比例）與一個(gè)轉(zhuǎn)換系數(shù)相加，有時(shí)還需要手動(dòng)定義一些“神秘?cái)?shù)值”（譯注：magic number，意指程序中出現(xiàn)的沒(méi)有任何注解或標(biāo)明出處的數(shù)字），要么這兒改改，要么那兒調(diào)調(diào)。

你說(shuō)得很對(duì)，能夠創(chuàng)造性地使用 D3 也是我最喜歡它的原因之一！

代表衛(wèi)星的圓圈根據(jù)樹(shù)狀地圖中的控制區(qū)域和軌道類(lèi)型分組，再利用 D3 的力導(dǎo)向布局計(jì)算它們的確切位置

【問(wèn)】關(guān)于用 D3 為紙媒等印刷媒介生成靜態(tài)可視化作品，您能再分享一下這方面的看法嗎？我認(rèn)為我們?cè)谶@類(lèi)問(wèn)題上的討論還遠(yuǎn)遠(yuǎn)不夠！

【Nadieh】 我喜歡創(chuàng)建靜態(tài)視覺(jué)效果，在創(chuàng)作過(guò)程中我也幾乎一直在用 D3.js。對(duì)于印刷版視覺(jué)效果的創(chuàng)作，有一點(diǎn)很重要，那就是或許應(yīng)該用 SVG 來(lái)完成創(chuàng)作，而不是使用 HTML5 的 canvas 畫(huà)布。這樣，雜志編輯們拿在手里的就是一個(gè)可以自由縮放大小的矢量文件。此外，字體和標(biāo)題這些內(nèi)容也可以進(jìn)行調(diào)整（比如更換字體）和潤(rùn)色（比如修改文案措辭）。如果將瀏覽器中的視覺(jué)效果帶入矢量編輯器，那么絕大部分樣式都會(huì)被復(fù)制過(guò)來(lái)（我發(fā)現(xiàn) Illustrator 在復(fù)制 CSS 樣式與設(shè)置方面做得最好）。

【問(wèn)】您與 Shirley Wu 合作完成的項(xiàng)目和《數(shù)據(jù)草圖》一書(shū)（Data Sketches，由 A K Peters 出版社于 2021 年出版），啟發(fā)了我們中的許多人，讓我們?cè)跀?shù)據(jù)的處理方面更有創(chuàng)造力。您對(duì)初涉該領(lǐng)域的新人有什么建議嗎？

【Nadieh】 聽(tīng)到這本書(shū)能帶給大家啟發(fā)和靈感，我感到無(wú)比欣慰?；叵肫饋?lái)還有些奇怪，當(dāng)初我和 Shirley 開(kāi)始編著《數(shù)據(jù)草圖》時(shí)，曾一度以為它可能是個(gè)只有我們和一些親密的朋友才會(huì)去欣賞的愚蠢項(xiàng)目（silly project）呢。

至于建議，主要有兩方面。一個(gè)是創(chuàng)作（to create）。盡可能多地去創(chuàng)作可視化作品。每創(chuàng)作一個(gè)新的作品，你都會(huì)學(xué)到新的東西（有時(shí)甚至是在不知不覺(jué)中）；遇到新的問(wèn)題或陷阱（pitfalls），要想出新的獨(dú)具創(chuàng)意的解決方案來(lái)克服它們。當(dāng)我回顧自己在這條道路上的旅程以及沿途創(chuàng)作的可視化作品時(shí)，都會(huì)清楚地看到自己是如何在編碼和創(chuàng)意方面變得更加自信。這些經(jīng)歷和收獲又進(jìn)一步對(duì)我的創(chuàng)作產(chǎn)生積極的影響。

第二個(gè)建議，是嘗試鉆研你真正感興趣的數(shù)據(jù)和主題，即便這些數(shù)據(jù)不是現(xiàn)成的，而是需要（手工）收集的。對(duì)自己真正感興趣的主題進(jìn)行數(shù)據(jù)分析，即使遇到技術(shù)上或設(shè)計(jì)上的困難，也會(huì)更容易堅(jiān)持下去。這一點(diǎn)你也可以在《數(shù)據(jù)草圖》一書(shū)中得到印證。在數(shù)據(jù)方面，我們從來(lái)不去選那條好走的路，而是一直嘗試讓興趣來(lái)引導(dǎo)我們。幾乎在所有情況下，數(shù)據(jù)都會(huì)不知不覺(jué)地出現(xiàn)在某個(gè)地方。

2.7 本章小結(jié)

• D3 項(xiàng)目要有一個(gè) Web 服務(wù)器才能正常運(yùn)行。利用 VS Code 的 Live Server 擴(kuò)展，可以簡(jiǎn)單快速地在本地開(kāi)發(fā)環(huán)境中搭建一個(gè) Web 服務(wù)器。
• 有兩種方法將 D3 庫(kù)加載到項(xiàng)目中：一是在 index.html 中添加 script 標(biāo)簽；二是使用 NPM 模塊引入 D3 庫(kù)。為簡(jiǎn)單起見(jiàn)，本書(shū)前幾章使用 script 標(biāo)簽的方法。
• D3 既可以完整加載整個(gè)庫(kù)，也可以按需加載必要的 D3 模塊，從而提高項(xiàng)目性能。
• 通過(guò) script 標(biāo)記加載文件和庫(kù)時(shí)，script 標(biāo)簽生效的順序與瀏覽器讀取腳本的順序相同。也就是說(shuō)，引入 D3 的 script 標(biāo)簽，必須放到使用 D3 的 JavaScript 文件所對(duì)應(yīng)的 script 標(biāo)簽前面。否則，瀏覽器將無(wú)法訪問(wèn) JavaScript 文件中的 D3 方法而導(dǎo)致報(bào)錯(cuò)。
• D3 使用 d3.select() 和 d3.selectAll() 方法從 DOM 中選擇元素。前者只返回第一個(gè)元素，而后者返回與其選擇器匹配的所有 DOM 元素。
• 作為參數(shù)傳給 select() 和 selectAll() 方法的字符串選擇器，與 CSS 中的選擇器相同，均使用標(biāo)簽名、類(lèi)名、ID 或這些名稱(chēng)的組合來(lái)標(biāo)識(shí) DOM 元素。
• append() 方法可以將新增元素添加為該選擇集的最后一個(gè)子元素。
• attr() 方法用于添加或修改元素的 attribute 屬性。它接受兩個(gè)參數(shù)：屬性名稱(chēng)與屬性值。
• style() 方法可以設(shè)置和修改 DOM 元素的 style 屬性（attribute），也需要傳兩個(gè)參數(shù)：樣式的 property 屬性名與屬性值。
• style() 方法可以設(shè)置行內(nèi)樣式，并覆蓋通過(guò)外部 CSS 樣式表及 attribute 視覺(jué)屬性設(shè)置的樣式。