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.

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的更多相关文章

  1. rt-thread learning notes

    rt-thread learning notes 2018-01-15 > 001 具有相同优先级的线程,每个线程的时间片大小都可以在初始化或创建该线程时指定 rt_thread_t rt_th ...

  2. Mybatis Learning Notes 1

    Mybatis Learning Notes 主要的参考是博客园竹山一叶的Blog,这里记录的是自己补充的内容 实体类属性名和数据库不一致的处理 如果是实体类的结果和真正的数据库的column的名称不 ...

  3. Rust learning notes

    Rust learning notes Rust Version 1.42.0 $ curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs ...

  4. Coursera, Machine Learning, notes

      Basic theory (i) Supervised learning (parametric/non-parametric algorithms, support vector machine ...

  5. 【Learning Notes】线性链条件随机场(CRF)原理及实现

    1. 概述条件随机场(Conditional Random Field, CRF)是概率图模型(Probabilistic Graphical Model)与区分性分类( Discriminative ...

  6. SQL Learning Notes

    Sams Teach Yourself SQL in 10 Minutes

  7. go learning notes

    1)  cgo $go install test.go # command-line-arguments /usr/bin/ld: unrecognized option '--build-id=no ...

  8. 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 ...

  9. Python Django Learning Notes..

    The first time I came across django was last month.. Since then I was considering it as the better c ...

随机推荐

  1. Linux shell脚本中shift的用法说明

    shift命令用于对参数的移动(左移),通常用于在不知道传入参数个数的情况下依次遍历每个参数然后进行相应处理(常见于Linux中各种程序的启动脚本). 示例1:依次读取输入的参数并打印参数个数:run ...

  2. Redis 主从复制原理及雪崩 穿透问题

    定义: Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API.从2010年3月15日起,Redis的开发工作由VMw ...

  3. 网络流 之 P2766 最长不下降子序列问题

    题目描述 «问题描述: 给定正整数序列x1,...,xn . (1)计算其最长不下降子序列的长度s. (2)计算从给定的序列中最多可取出多少个长度为s的不下降子序列. (3)如果允许在取出的序列中多次 ...

  4. ASP.NET Core部署在IIS上

    1.下载安装 Windows Server Hosting ,它的作用是,让IIS有反向代理功能(Asp.Net Core Module负责反向代理工作),将请求转发到 Kestrel 2.发布网站, ...

  5. 记一次在咸鱼上购买 MacBook Pro 的经历

    前言 以前一直用的是 windows 的,但是最近特别想买个 macOS 的.其实不是为了其他什么目的,只是涉及到开发 macOS更接近 linux 系统,一直没使用过所以就想尝试体验下,而且现在很多 ...

  6. FreeHttp (a fiddler add in to temper the http)

    introduction FreeHttp is a Fiddler plugin. With FreeHttp you can modify the request or response mess ...

  7. 发布时一键添加html中的css标签和script标签版本号来防止浏览器缓存

    AppendFileVersion 是一个VSIX插件支持vs2015意以上版本 是我用来发布时一键添加html中的css标签和script标签版本号来防止浏览器缓存 分享给大家! download ...

  8. vue keepalive 动态设置缓存

    场景:A首页.B列表页.C详情页B---->C 缓存‘列表1’详情的数据A---->C 读取‘列表1’详情的数据B---->C (希望清除‘列表1’的缓存,变成缓存‘列表2’详情的数 ...

  9. win 执行puppet

    C:\scripts\win_exec_proxy.bat  \\adsoft.base-fx.com\puppet\puppet\files\Windows_10_x64\C\user\logon\ ...

  10. MySQL 的数据目录

    MySQL里面有4个数据库是属于MySQL自带的系统数据库: mysql 这个数据库贼核心,它存储了MySQL的用户账户和权限信息,一些存储过程.事件的定义信息,一些运行过程中产生的日志信息,一些帮助 ...