産品特色
編輯推薦
適讀人群 :本書適閤所有想使用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 API詳解(全彩) 下載 mobi epub pdf txt 電子書 格式