産品特色
編輯推薦
適讀人群 :本書適閤所有想使用D3 實現數據可視化方案的人使用。讀者朋友可以將本書作為入門參考,也可以作為速查手冊。 “一圖勝韆言”,數據可視化使人們對海量復雜數據的闡釋和理解變得事半功倍。D3是當今*流行的可視化利器。
本書用大量簡潔直觀的案例詳細介紹瞭D3的使用。全書圖文並茂,全彩印刷,力圖使讀者對D3有深入理解和整體把握。
內容簡介
大數據時代,數據的價值愈加重要,數據在經曆瞭數據獲取、數據挖掘、數據展示三個主要階段後直麵用戶。數據可視化處於這條生産鏈的下遊,控製著數據對用戶的輸齣,它的優劣直接決定瞭數據處理的效果。
D3作為***的開源的Web數據可視化工具之一,支持大數據量數據可視化展示,提供豐富的布局和生動的交互功能,能夠充分錶現數據的內涵,激發用戶興趣並增強用戶與數據的溝通。
本書從基本語法特點、可視化布局、實際應用開發三個方麵介紹D3,以期讀者能夠循序漸進掌握D3數據可視化開發的技能從而應用到科研和商業應用中。
作者簡介
張天旭,CSDN博客技術專傢,寫有D3方麵專欄,纍計閱讀量達到17萬。
目錄
第1 章 核心(Core) .......................... 1
1.1 選擇 ......................................................... 1
1.1.1 d3.select(selector) .......................................... 1
1.1.2 d3.select(node) ............................................... 2
1.1.3 d3.selectAll(selector) ..................................... 3
1.1.4 d3.selectAll(nodes) ........................................ 4
1.1.5 selection.attr(name[, value]) .......................... 4
1.1.6 selection.classed(name[, value]) .................... 5
1.1.7 selection.style(name[, value[, priority]]) ........ 6
1.1.8 selection.property(name[, value]) .................. 6
1.1.9 selection.text([value]) .................................... 7
1.1.10 selection.html([value]) ................................. 8
1.1.11 selection.append(name) ................................ 9
1.1.12 selection.insert(name[, before]) ................... 9
1.1.13 selection.remove() ...................................... 10
1.1.14 selection.data([values[, key]]) .................... 10
1.1.15 selection.enter().......................................... 12
1.1.16 selection.exit() ........................................... 14
1.1.17 selection.filter(selector) ............................. 15
1.1.18 selection.datum([value]) ............................ 15
1.1.19 selection.sort(comparator) .......................... 16
1.1.20 selection.on(type[, listener[, capture]]) ...... 17
1.1.21 d3.event ..................................................... 18
1.1.22 d3.mouse(container) .................................. 19
1.1.23 selection.transition() .................................. 19
1.1.24 selection.select(selector) ............................ 19
1.1.25 selection.selectAll(selector) ....................... 20
1.1.26 selection.each(function) ............................. 21
1.1.27 selection.call(function[, arguments…]) ..... 22
1.1.28 selection.empty() ....................................... 23
1.1.29 selection.node() ......................................... 23
1.1.30 selection.size() ........................................... 23
1.2 過渡 ....................................................... 23
1.2.1 transition.delay([delay]) .............................. 23
1.2.2 transition.duration([duration]) ..................... 24
1.2.3 transition.ease([value[, arguments]]) ........... 25
1.2.4 transition.attr(name, value) .......................... 25
1.2.5 transition.attrTween(name, tween) .............. 26
1.2.6 transition.style(name, value[, priority]) ....... 26
1.2.7 transition.styleTween(name,
tween[, priority]) ......................................... 27
1.2.8 transition.text(value) .................................... 27
1.2.9 transition.tween(name, factory) ................... 28
1.2.10 transition.remove() .................................... 28
1.2.11 transition.select(selector) ........................... 29
1.2.12 transition.selectAll(selector) ...................... 29
1.2.13 transition.filter(selector) ............................. 30
1.2.14 transition.transition() .................................. 30
1.2.15 transition.each([type, ]listener) .................. 30
1.2.16 transition.call(function[, arguments…]) ..... 31
1.2.17 transition.empty() ....................................... 32
1.2.18 transition.node() ......................................... 32
1.2.19 transition.size() .......................................... 32
1.2.20 d3.ease(type[, arguments…]) ..................... 32
1.2.21 ease(t) ........................................................ 33
1.2.22 d3.timer(function[, delay[, time]]) ............. 33
1.2.23 d3.interpolate(a, b) ..................................... 34
1.2.24 interpolate(t) .............................................. 34
1.2.25 d3.interpolateNumber(a, b) ........................ 35
1.2.26 d3.interpolateRound(a, b) .......................... 35
1.2.27 d3.interpolateString(a, b) ........................... 35
1.2.28 d3.interpolateRgb(a, b) .............................. 36
1.2.29 d3.interpolateHsl(a, b) ............................... 36
1.2.30 d3.interpolat
前言/序言
數據可視化是用圖形圖像等方式錶現數據內涵的技術。俗話說“一圖勝韆言”,數據可視化最重要的意義在於讓數據變得簡單直觀。它有效利用瞭人眼的感知能力和大腦的處理能力,讓數據中蘊含的規律一目瞭然。尤其是在大數據時代,數據可視化已成為一座橋梁,跨越瞭數據和使用者之間的鴻溝,減少瞭在數據分析、交流和傳播中的障礙。它使得人們對海量、復雜數據的闡釋和理解變得事半功倍。在很多情況下,數據可視化是理解和錶達數據的有效手段,有時甚至是唯一的手段。
數據可視化的強大魅力還源於它是美而生動的。隻有一堆數據難免枯燥乏味,可視化技術給數據穿上瞭華麗的外衣,豐富的交互功能增添瞭數據的靈動性。數據可視化綻放瞭數據之美。它讓數據變得生動鮮活,有效地吸引瞭人們的注意力,能大大激發人們的好奇心和求知欲。讓人們在與數據的交互過程中不僅探索到瞭知識還收獲瞭樂趣。正因為如此,數據可視化技術蓬勃發展,在互聯網、生物、金融、醫學、建築、教育、國防等需要展現數據的行業都有廣泛的應用。
工欲善其事必先利其器。D3 是當今最流行的數據可視化工具之一。D3 是一個JavaScript庫,擅長繪製交互式矢量圖錶,底層使用瞭SVG 繪圖技術並通過數據驅動創建文檔。D3 提供的API 主要包括對HTML 和SVG 文檔的操作、處理多種格式的數據、為特定的可視化布局生成數據,以及提供豐富的交互和動畫功能等。通過這些編程接口,我們既不用太關心底層實現,也不會因為封裝程度太高而很難修改,所以D3 比Processing1這樣的底層繪圖庫更簡單,比Echarts2這樣高度封裝的圖錶庫更自由,是一個靈活輕量的前端數據可視化庫。而且D3 不依賴其他的庫,你可以充分發揮想象,僅用D3 就可以創造絢麗多彩的數據可視化作品。當然,到底要不要使用D3 還需要根據具體情況進行選擇,錶0.1 可以作為一個技術選型的參考。
0.1 D3 的適用範圍
考慮因素 適用範圍
開源 D3 基於開源協議BSD-3-Clause3,可以免費用於商業項目。源碼托管在GitHub 上4,截至2015年9 月26 日star 數已達41869 次,fork 數達11021 次,有大量用戶和豐富友好的案例
兼容性 支持Firefox、Chrome、Safari、Opera、IE9+等現代瀏覽器。支持Android 和iOS 平颱
功能 D3 擅長於繪製二維Web 數據可視化矢量圖錶,支持豐富的交互功能,支持創建自定義可視化方案。但不支持3D 可視化,並且加載到瀏覽器的數據量不能太大(10MB 以內較閤適)。D3 不是現成的圖錶庫,相比於封裝好的圖錶庫學習和開發成本都較高
目前D3 的官方文檔已經十分全麵瞭,涵蓋瞭600 多個函數,全文接近6 萬個單詞。然而,D3 參考文檔中的專業術語較多,很多地方錶述十分晦澀艱深,原文中的示例代碼較少,況且對於初學者來說直接看英文也很吃力。本書筆者為瞭方便D3 學習者更好地理解和使用D3,對D3 官方API(應用程序編程接口)5進行瞭詳細介紹,不僅翻譯瞭API 全文,還為大部分函數都編寫瞭簡單的示例代碼。下麵,我們先來看看本書涉及的D3 官方文檔主要包含哪些內容,D3 API 總覽如錶0.2 所示。
錶0.2 D3 API 總覽
內容 簡介
核心(Core) 包括選擇器、過渡、數據處理、本地化、顔色等
比例尺(Scales) 在數據編碼和視覺編碼之間轉換
可縮放矢量圖形(SVG) 提供用於創建可伸縮矢量圖形的實用工具
時間(Time) 解析或格式化時間,計算日曆的時間間隔等
布局(Layouts) 推導定位元素的輔助數據
地理(Geography) 球麵坐標,經緯度運算
幾何(Geometry) 提供繪製2D 幾何圖形的實用工具
行為(Behaviors) 可重用的交互行為
本書覆蓋瞭絕大部分的API,為方便使用,本書盡量保持與官方文檔結構一緻,對錶0.2的每個部分單獨成章介紹。本書所用的D3 版本是3.5.5,全文案例在Chrome 瀏覽器中調試通過。一些簡單的函數直接使用瀏覽器的控製颱演示,少部分案例需要使用服務器運行,大部分案例都可以直接打開HTML 文檔來查看效果。對於本書的使用,強烈建議讀者朋友們邊看文字錶述邊參考示例代碼動手實踐。本書的隨書源碼可在https://github.com/tianxuzhang/d3-api-demo/archive/master.zip 和http://www.broadview.com.cn/下載使用,通過量的積纍最終一定會有質的改變。大傢要保持對新技術的興趣和對理想的熱情,在自學的同時多分享多討論。D3 的學習會是很有成就感的,希望讀者可以通過本書感受到數據可視化的魅力,能從中收獲快樂。
緻謝
首先要感謝章成誌教授的啓濛教育,是他讓我瞭解到D3 這門技術。並且,在學習和生活中給予瞭我足夠的信任和支持。可以說,章老師是我真正的良師益友。
其次,感謝Mike Bostock 以及其他D3 貢獻者,是他們開發瞭D3 這個優秀的數據可視化庫,並且提供瞭大量簡單實用的案例。正因為如此,纔能讓我們有機會領略數據可視化的奇妙。
還要感謝CSDN 這個平颱,CSDN 是中國程序員最常使用的技術網站。通過CSDN 讓我能夠與更多數據可視化愛好者相識並共同探討D3 相關技術。
感謝電子工業齣版社的付睿編輯,沒有伯樂就沒有韆裏馬,謝謝她給予我這個機會編寫本書。感謝顧慧芳編輯,謝謝她為本書辛勤校對和編輯,這有效地保障瞭本書的質量。
最重要的是要感謝參與D3 參考文檔翻譯以及對本書提供幫助的人,他們是:崔博敏、何凱琳、張玉傑、季國亮、張爍、邊城、衛學士、翟琰琦、路明非、何麗、誰浮、馬語者、現明漣漪、Carry on、陶凜然、李琛婧、趙榮和宋墩江以及其他關心和支持我的人,和你們的討論和交流是我最溫暖的迴憶。
最後,也是最應該感謝的是一直與我並肩奮鬥的魏飛,感謝那些安靜得隻剩下鍵盤聲的夜晚,每一個奮鬥的日子都值得深深銘記。
由於作者水平有限,書中難免有錯誤之處,我們渴望得到您的反饋,如果發現問題請發送郵件至zhang_tianxu@sina.com,或者在新浪微博上@D3 數據可視化給我們批評指正。
張天旭
2015 年9 月
D3.js 數據可視化實戰指南 擁抱數據的無限可能,用視覺語言講述深刻洞察 在這個數據爆炸的時代,如何從海量信息中提取價值、洞悉趨勢,已成為個人和組織成功的關鍵。數據可視化,作為連接數據與人類認知之間的橋梁,其重要性不言而喻。而 D3.js,作為前端數據可視化領域的王者,以其強大的靈活性、近乎無限的定製能力,以及對 Web 標準的深度支持,成為瞭無數開發者和設計師的首選工具。 本書並非 D3.js 的泛泛介紹,而是旨在為讀者提供一套係統、深入且極具實操性的 D3.js 數據可視化學習路徑。我們不滿足於錶麵的 API 調用,而是深入剖析 D3.js 的核心設計理念,理解其如何在瀏覽器環境中高效運作,以及如何利用其強大的生態係統解決復雜的可視化難題。本書的宗旨是讓你真正掌握 D3.js 的精髓,從零開始構建齣令人驚嘆、富有洞察力的數據可視化作品。 本書亮點: 循序漸進,構建紮實基礎: 我們將從 D3.js 的核心概念講起,包括 DOM 操作、SVG 和 Canvas 的繪製原理、比例尺、軸、數據綁定等基礎知識。每一章都圍繞著一個核心概念展開,並通過清晰的示例代碼進行講解,確保讀者能夠逐步理解並掌握。 聚焦核心 API,深入原理: 不同於某些淺嘗輒止的教程,本書將重點解析 D3.js 最常用且最強大的 API。我們將深入理解 `select`, `selectAll`, `data`, `enter`, `update`, `exit` 等關鍵方法的工作機製,理解它們如何實現數據與 DOM 的聯動,以及如何有效地管理可視化元素的生命周期。 實戰驅動,案例豐富: 理論學習離不開實踐。本書精心設計瞭多個不同難度、不同應用場景的實戰案例,涵蓋瞭摺綫圖、柱狀圖、散點圖、餅圖、地圖可視化、網絡圖等經典圖錶類型。每個案例都從需求分析、數據準備、圖錶構建到交互實現,提供瞭完整的開發流程。 掌握高級技巧,應對復雜需求: 隨著對 D3.js 的深入,你將接觸到如何處理動態數據、實現平滑過渡動畫、構建響應式可視化、集成第三方庫以及進行性能優化等高級話題。本書將引導你掌握這些技巧,讓你能夠應對更加復雜和個性化的可視化需求。 理解底層機製,提升解決問題能力: 瞭解 D3.js 底層的工作原理,如其如何與瀏覽器渲染引擎協同工作,如何管理內存,如何處理事件流等,將極大地提升你的調試和問題解決能力。本書會適時穿插對這些底層機製的講解,幫助你成為一個更自信的 D3.js 開發者。 強調設計原則,打造優秀可視化: 優秀的可視化不僅在於技術實現,更在於其傳達信息的清晰度和有效性。本書將穿插介紹數據可視化的基本設計原則,如選擇閤適的圖錶類型、顔色運用、信息層級等,幫助你創作齣既美觀又富有洞察力的作品。 代碼風格規範,易於理解與復用: 本書提供的所有代碼示例都遵循一緻且良好的代碼風格,注重可讀性和模塊化,方便讀者理解、學習和移植到自己的項目中。 適閤讀者: 前端開發者: 渴望掌握一門強大且靈活的可視化工具,為自己的 Web 應用添加數據驅動的交互式圖錶。 數據分析師/科學傢: 希望將分析結果以更直觀、更具說服力的方式呈現,與他人分享洞察。 UI/UX 設計師: 追求更具錶現力的數據可視化設計,提升用戶體驗。 對數據可視化感興趣的初學者: 想要係統學習 D3.js,打下堅實的基礎。 已有 D3.js 基礎,希望深入進階的開發者: 尋求更高級的應用技巧和底層原理的理解。 本書內容梗概(部分): 第一部分:D3.js 的基石——核心概念與工具 第一章:歡迎來到 D3.js 的世界 數據可視化的重要性與 D3.js 的定位 D3.js 的優勢與適用場景 搭建開發環境:Node.js, npm/yarn, Webpack/Vite 第一個 D3.js 程序:Hello, World! 第二章:DOM 操作與選擇器 D3.js 的選擇器 API (`select`, `selectAll`) DOM 元素的創建、添加與移除 (`append`, `insert`, `remove`) 屬性與樣式的設置 (`attr`, `style`) 事件處理 (`on`) 第三章:SVG 與 Canvas 的魅力 SVG 基礎:元素、坐標係、路徑 使用 D3.js 繪製 SVG 元素(圓形、矩形、綫、路徑等) Canvas API 簡介與 D3.js 的集成 SVG 與 Canvas 的選擇與權衡 第四章:數據綁定:D3.js 的靈魂 理解數據與 DOM 元素的映射關係 `data()` 方法的應用 `enter()`, `update()`, `exit()` 的工作流程 鍵函數(key function)的重要性與應用 第五章:比例尺:數據到視覺屬性的轉換 比例尺的概念與作用 綫性比例尺 (`scaleLinear`) 序數比例尺 (`scaleBand`, `scalePoint`) 時間比例尺 (`scaleTime`) 顔色比例尺 (`scaleOrdinal`, `scaleSequential`) 域(domain)與範圍(range)的設置 第六章:坐標軸:讓數據更易讀 坐標軸的構成與作用 使用 D3.js 創建軸 (`axisBottom`, `axisLeft`, `axisTop`, `axisRight`) 軸的格式化(Tick formatting) 自定義軸樣式 第二部分:構建經典的圖錶類型 第七章:摺綫圖:展現趨勢變化 數據準備與預處理 使用 `d3.line()` 生成路徑數據 繪製摺綫與添加點標記 添加交互:鼠標懸停顯示數據點信息 第八章:柱狀圖:比較離散的數據 分類數據的錶示 使用 `d3.scaleBand()` 實現柱子的布局 繪製柱形與添加標簽 動態更新柱狀圖:數據變化時的過渡效果 第九章:散點圖:探索變量間的關係 雙變量數據的可視化 使用 `d3.scaleLinear()` 映射 x、y 軸 繪製散點與自定義形狀 添加交互:平移、縮放與信息提示 第十章:餅圖與環形圖:展示組成比例 比例數據的可視化 使用 `d3.pie()` 和 `d3.arc()` 生成扇形數據 為餅圖添加顔色與標簽 交互:扇形突齣顯示 第三部分:進階應用與高級技巧 第十一章:地圖可視化:數據的地理空間展現 GeoJSON 格式簡介 D3.js 的地理投影 (`d3.geoProjection`) 使用 `d3.geoPath()` 繪製地理邊界 結閤地圖數據與統計數據進行可視化 第十二章:網絡圖(力導嚮圖):揭示連接關係 節點(nodes)與鏈接(links)的概念 D3.js 的力模擬器 (`d3.forceSimulation`) 實現節點與鏈接的動態布局 交互:拖拽節點,顯示節點信息 第十三章:數據綁定與過渡動畫 深入理解 `enter`/`update`/`exit` 的應用場景 使用 `transition()` 實現平滑的屬性變化 延遲(delay)與持續時間(duration)的控製 組閤過渡效果 第十四章:響應式可視化:適應不同屏幕尺寸 使用 CSS 媒體查詢 D3.js 的尺寸自適應技巧 容器大小變化時的圖錶重繪 第十五章:數據獲取與異步處理 使用 `d3.csv()`, `d3.json()`, `d3.tsv()` 加載外部數據 Promise 與 async/await 的應用 處理數據加載錯誤 第十六章:性能優化與最佳實踐 內存管理與垃圾迴收 避免不必要的 DOM 操作 Canvas 繪製的優勢與時機 代碼組織與模塊化 第十七章:D3.js 生態係統與未來展望 常用的 D3.js 插件與擴展 與其他 JavaScript 庫的集成 D3.js 的發展趨勢與學習資源 結語 掌握 D3.js,意味著你將擁有將原始數據轉化為生動、富有洞察力的視覺敘事的強大能力。本書將是你在這條道路上不可或缺的夥伴。我們鼓勵讀者在學習過程中勤加練習,動手實踐每一個代碼示例,並嘗試根據自己的需求進行修改和擴展。數據可視化是一個充滿創造力的領域,希望通過本書,你能點燃內心的火花,用 D3.js 創造齣屬於你自己的數據故事。 準備好迎接挑戰,一起探索 D3.js 的無限可能吧!