D3 learning notes

D3

https://d3js.org/

數據驅動文檔顯示， 利用 SVG HTML CSS技術。

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

 

D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. For example, you can use D3 to generate an HTML table from an array of numbers. Or, use the same data to create an interactive SVG bar chart with smooth transitions and interaction.

 

D3 is not a monolithic framework that seeks to provide every conceivable feature. Instead, D3 solves the crux of the problem: efficient manipulation of documents based on data. This avoids proprietary representation and affords extraordinary flexibility, exposing the full capabilities of web standards such as HTML, SVG, and CSS. With minimal overhead, D3 is extremely fast, supporting large datasets and dynamic behaviors for interaction and animation. D3’s functional style allows code reuse through a diverse collection of official and community-developed modules.

https://d3js.org/

綁定數據後， 數據綁定到的DOM， 則進行數據更新。

沒有綁定到DOM的數據， 則使用 enter 得到， 能夠append增長新的DOM。

對於沒有綁定數據的DOM， 使用exit得到， 使用remove刪除DOM。

 

數據綁定能夠是屢次， 每次綁定後，使用 enter 和 exit 來維護 unmatched object 數據 或者  DOM

exit 須要退出生命週期的元素DOM，

enter 須要進入生命週期的/實例化DOM的數據元素。

// Update… var p = d3.select("body") .selectAll("p") .data([4, 8, 15, 16, 23, 42]) .text(function(d) { return d; }); // Enter… p.enter().append("p") .text(function(d) { return d; }); // Exit… p.exit().remove();

 

Scott Murray 教程

https://alignedleft.com/tutorials/d3

只有基礎知識的介紹， 完成散點圖 條形圖 的繪製介紹。 其餘更多內容須要 購買其寫的書最新版。

不過也夠了， 對於程序員來講， 最關鍵的是代碼， 和代碼的理解過程。下面介紹本書代碼， 用功擼過一遍後， 對D3的總體掌握就七七八八了。

D3 Tutorials

1. About these tutorials
2. Fundamentals
3. Setup
4. Adding elements
5. Chaining methods
6. Binding data
7. Using your data
8. Drawing divs
9. The power of data()
10. An SVG primer
11. Drawing SVGs
12. Types of data
13. Making a bar chart
14. Making a scatterplot
15. Scales
16. Axes
17. Transitions

 

Scott Murray 附屬代碼

https://github.com/alignedleft/d3-book/

目錄爲：

從 chapter4開始， 到chapter9是上面開源書對應的代碼。

後面章節爲高級部分，包括事件，交互， 餅圖等的畫法。

運行方法見上一篇博客的vscode live preview使用。

 

D3 API

https://github.com/d3/d3/blob/master/API.md

再擼代碼過程當中，若是遇到API不懂得，能夠到官方GITHUB上去查找。

D3 is a collection of modules that are designed to work together; you can use the modules independently, or you can use them together as part of the default build. The source and documentation for each module is available in its repository. Follow the links below to learn more. For changes between major versions, see CHANGES; see also the release notes and the 3.x reference.

• Arrays (Statistics, Search, Transformations, Histograms)
• Axes
• Brushes
• Chords
• Collections (Objects, Maps, Sets, Nests)
• Colors
• Color Schemes
• Contours
• Dispatches
• Dragging
• Delimiter-Separated Values
• Easings
• Fetches
• Forces
• Number Formats
• Geographies (Paths, Projections, Spherical Math, Spherical Shapes, Streams, Transforms)
• Hierarchies
• Interpolators
• Paths
• Polygons
• Quadtrees
• Random Numbers
• Scales (Continuous, Sequential, Diverging, Quantize, Ordinal)
• Selections (Selecting, Modifying, Data, Events, Control, Local Variables, Namespaces)
• Shapes (Arcs, Pies, Lines, Areas, Curves, Links, Symbols, Stacks)
• Time Formats
• Time Intervals
• Timers
• Transitions
• Voronoi Diagrams
• Zooming

D3 uses semantic versioning. The current version is exposed as d3.version.

 

參考資料：

https://d3js.org/

https://alignedleft.com/tutorials/d3

https://github.com/alignedleft/d3-book/

 https://github.com/d3/d3/blob/master/API.md