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. C# -- 使用线程池 ThreadPool 执行多线程任务

    C# -- 使用线程池 ThreadPool 执行多线程任务 1. 使用线程池 class Program { static void Main(string[] args) { WaitCallba ...

  2. 浏览器仿EXCEL表格插件 - 智表ZCELL产品V1.4发布

    智表(zcell)是一款浏览器仿excel表格jquery插件.智表可以为你提供excel般的智能体验,支持双击编辑.设置公式.设置显示小数精度.下拉框.自定义单元格.复制粘贴.不连续选定.合并单元格 ...

  3. 题解 P1944 最长括号匹配_NOI导刊2009提高(1)

    栈,模拟 把每个元素逐个入栈 如果和栈顶元素匹配,那么一块弹出去,同时标记这里是可匹配的. 取出连续的,最长的可匹配的序列即可. #include <iostream> #include ...

  4. 【技术说明】iOS10来了,AppCan已全面适配!

    IPhone 7出了,你的肾还好吗?别紧张,不买肾7,同样可以体验最新的iOS10! AppCan对引擎.插件.编译系统等都进行了重要升级,让你的APP轻松适配iOS10!具体如何,请往下看! 引擎 ...

  5. 如何将div高度填满剩余高度

    下列代码中navbar高度为30px,content高度需要填满浏览器的剩余高度 <div id="body">     <div id="navbar ...

  6. IDEA快捷建使用

    因为以前使用的IDE工具是Eclipse,所以在公司中都是用IDEA的情况下,换成了IDEA,感觉是好用了很多. 其他快捷键: Ctrl+Shift + Enter,语句完成 “!”,否定完成,输入表 ...

  7. vuex 状态管理 通俗理解

    解释:集中响应式数据管理,一处修改多处使用,主要应用于大中型项目. 安装: 第一:index.js:(注册store仓库) npm install vuex -D // 下载vuex import V ...

  8. 菜鸟学IT之python网页爬取初体验

    作业来源:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE1/homework/2881 1. 简单说明爬虫原理 爬虫简单来说就是通过程序模拟浏览器放松请求站 ...

  9. WMI入门教程之WMI中的类在哪里?

    Powershell专栏: https://www.jb51.net/list/list_234_1.htm https://www.pstips.net/get-wmiobject-becomes- ...

  10. consumer zookeeper is not a recognized option

    kafka 创建消费者报错 consumer zookeeper is not a recognized option 在做kafka测试的时候,使用命令bin/kafka-console-consu ...