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
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
D3 learning notes的更多相关文章
- rt-thread learning notes
rt-thread learning notes 2018-01-15 > 001 具有相同优先级的线程,每个线程的时间片大小都可以在初始化或创建该线程时指定 rt_thread_t rt_th ...
- Mybatis Learning Notes 1
Mybatis Learning Notes 主要的参考是博客园竹山一叶的Blog,这里记录的是自己补充的内容 实体类属性名和数据库不一致的处理 如果是实体类的结果和真正的数据库的column的名称不 ...
- Rust learning notes
Rust learning notes Rust Version 1.42.0 $ curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs ...
- Coursera, Machine Learning, notes
Basic theory (i) Supervised learning (parametric/non-parametric algorithms, support vector machine ...
- 【Learning Notes】线性链条件随机场(CRF)原理及实现
1. 概述条件随机场(Conditional Random Field, CRF)是概率图模型(Probabilistic Graphical Model)与区分性分类( Discriminative ...
- SQL Learning Notes
Sams Teach Yourself SQL in 10 Minutes
- go learning notes
1) cgo $go install test.go # command-line-arguments /usr/bin/ld: unrecognized option '--build-id=no ...
- Java learning notes (1):Basic Knowlege points
Basic Knowlege points: 1: it's necessary that there is only one public class in per .java file 2: .j ...
- Python Django Learning Notes..
The first time I came across django was last month.. Since then I was considering it as the better c ...
随机推荐
- Java Web相关问题
关于这两天主要问题的解答: (1) 驱动程序无法使用安全套接字层(SSL)加密与 SQL Server 建立安全连接.错误: java.lang.RuntimeException: Could no ...
- [转]Lua和Lua JIT及优化指南
一.什么是lua&luaJit lua(www.lua.org)其实就是为了嵌入其它应用程序而开发的一个脚本语言, luajit(www.luajit.org)是lua的一个Just-In-T ...
- linux 搭建squid代理服务器
linux 搭建squid代理服务器 实验环境: 一台linux搭建Web服务器,充当内网web服务器(同时充当内网客户端) 202.100.10.100 一台linux系统充当网关服务器,两个网卡, ...
- 老白关于rac性能调优的建议(10gRAC)
RAC应用设计方面需要在底层做很有设计.虽然ORACLE的售前人员总是说RAC的扩展性是透明的,只要把应用分到不同的节点,就可以平滑的扩展系统能力了.而事实上,RAC的CACHE FUSION机制决定 ...
- css display和vertical-align 属性
display 定义和用法 display 属性规定元素应该生成的框的类型. 实例 <html> <head> <style type="text/css&qu ...
- JQuery:怎么动态切换一个元素的显示、隐藏呢?原来隐藏就显示,原来显示就隐藏
使用toggle() 方法:<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"& ...
- .NET程序员我是如何通过一个产品在2年内买车买房
刚开始写博客不足之处望大家多多指点,少一些质疑多一些帮助,我们就能成为朋友. 我写博客的目的其实很简单就是为了分享知识,如有幸能申请当MVP那是最好不过了,这个过程对于“大牛”来说很快,但对于我来说估 ...
- Redis进阶之使用Lua脚本开发
1.在Redis中使用Lua 在Redis中执行Lua脚本有两种方法:eval和evalsha. (1)eval eval 脚本内容 key个数 key列表 参数列表 下面例子使用了key列表和参数列 ...
- ABP之Owin集成
如果在应用程序中同时使用ASP.NET MVC 和 ASP.NET Web API,你需要使用Nuget管理器将Abp.Owin添加到自己的项目中. 安装 使用下面的命令安装: Install-Pac ...
- SequoiaDB 巨杉数据库
传统单点数据库的容量瓶颈,仅仅是分布式数据库所解决的问题之一.更重要的是在未来微服务化应用开发以及云化平台的趋势下,应用不再以“烟囱式”的中间件加数据库模式进行构建,而是采用数千甚至上万的微服务程序构 ...