引入D3

D3下载,本文下载时的版本为6.5.0

  1. mkdir d3.6.5.0
  2. unzip --help
  3. unzip d3.zip -d d3.6.5.0/
  4. ls d3.6.5.0/
  5. API.md CHANGES.md d3.js d3.min.js LICENSE README.md
  1. $ ls
  2. 01_empty.html static
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>import d3</title>
  6. <script type="text/javascript" src="static/d3.6.5.0/d3.js"></script>
  7. </head>
  8. <body>
  9. <script type="text/javascript">
  10. alert(1);
  11. </script>
  12. </body>
  13. </html>

python3

python -m http.server 8801 &

python2

python -m SimpleHTTPServer 8801 &

http://127.0.0.1:8801/01_empty.html

D3的选集

JS控制台中输入

d3.select("body")

返回的是一个JS对象,除了原型prototype外,主要有两个数组,

_groups 自己相关及其子元素相关信息

_parents 父元素相关,body的父元素就是html了

这个空页面,所以body中没有元素,下面添加多个元素,

<p>11</p>
<p>12</p>
<p>13</p>

在JS控制台上输入

selectAll与select的不同是,_groups数组中的每个元素都是一个NodeList

D3数据绑定

  1. <body>
  2. <p>11</p>
  3. <p>12</p>
  4. <p>13</p>
  5.  
  6. <script type="text/javascript">
  7. let dataset = [1,2,3,4,5]
  8. d3.selectAll("p")
  9. .data(dataset);
  10. </script>
  11. </body>

data() 将五个数据绑定到三个元素

可以看到元素还是三个,但每个元素上多了一个__data__属性,它的值对应的是数组中的元素

  1. <script type="text/javascript">
  2. let dataset = [1,2,3,4,5]
  3. d3.selectAll("p")
  4. .data(dataset)
  5. .enter();
  6. </script>

创建一个选集,就是初始化两个数组

  1. function Selection(groups, parents) {
  2. this._groups = groups;
  3. this._parents = parents;
  4. }

然后使用原型构建一系列方法,开头这6个方法非常重要,弄清理它们的作用有助于深入了解D3

  1. Selection.prototype = selection.prototype = {
  2. constructor: Selection,
  3. select: selection_select,
  4. selectAll: selection_selectAll,
  5. filter: selection_filter,
  6. data: selection_data,
  7. enter: selection_enter,
  8. exit: selection_exit,

enter()方法是创建一个新的选集并返回这个选集,重点就是其传入的参数:this._enter,

  1. var sparse = function(update) {
  2. return new Array(update.length);
  3. };
  4.  
  5. var selection_enter = function() {
  6. return new Selection(this._enter || this._groups.map(sparse), this._parents);
  7. };

this._enter这个属性是在data()方法中完成初始化的,data()这个方法稍微复杂,请直接看最后四行

  1. var selection_data = function(value, key) {
  2. if (!value) {
  3. data = new Array(this.size()), j = -1;
  4. this.each(function(d) { data[++j] = d; });
  5. return data;
  6. }
  7.  
  8. var bind = key ? bindKey : bindIndex,
  9. parents = this._parents,
  10. groups = this._groups;
  11.  
  12. if (typeof value !== "function") value = constant$1(value);
  13.  
  14. for (var m = groups.length, update = new Array(m), enter = new Array(m), exit = new Array(m), j = 0; j < m; ++j) {
  15. var parent = parents[j],
  16. group = groups[j],
  17. groupLength = group.length,
  18. data = value.call(parent, parent && parent.__data__, j, parents),
  19. dataLength = data.length,
  20. enterGroup = enter[j] = new Array(dataLength),
  21. updateGroup = update[j] = new Array(dataLength),
  22. exitGroup = exit[j] = new Array(groupLength);
  23.  
  24. bind(parent, group, enterGroup, updateGroup, exitGroup, data, key);
  25.  
  26. // Now connect the enter nodes to their following update node, such that
  27. // appendChild can insert the materialized enter node before this node,
  28. // rather than at the end of the parent node.
  29. for (var i0 = 0, i1 = 0, previous, next; i0 < dataLength; ++i0) {
  30. if (previous = enterGroup[i0]) {
  31. if (i0 >= i1) i1 = i0 + 1;
  32. while (!(next = updateGroup[i1]) && ++i1 < dataLength);
  33. previous._next = next || null;
  34. }
  35. }
  36. }
  37.  
  38. update = new Selection(update, parents);
  39. update._enter = enter;
  40. update._exit = exit;
  41. return update;
  42. };

在data()方法中完成了两个重要属性的初始化_enter,_exit,并返回一个新的选集

enter是按数据集的长度初始化的,而exit则是按html已有元素的长度初始化,之后再进行数据与html元素的绑定

  1. dataLength = data.length,
  2. enterGroup = enter[j] = new Array(dataLength),
  3. updateGroup = update[j] = new Array(dataLength),
  4. exitGroup = exit[j] = new Array(groupLength);

enter()

  1. <script type="text/javascript">
  2. var dataset = [1,2,3,4,5]
  3. var enter = d3.selectAll("p")
  4. .data(dataset)
  5. .enter();
  6. var jsonStr = JSON.stringify(enter);
  7. alert(jsonStr);
  8.  
  9. </script>

从输出上可以看到enter是一个选集,它比一个空的选集包含的内容更少

  1. {"_groups":
    [[null,null,null,
    {"ownerDocument":{
    "location":{
    "href":"file:///opt/wks/d3/d3-book-master/d3_demo/03_dataset.html",
    "origin":"null",
    "protocol":"file:","host":"","hostname":"","port":"",
    "pathname":"/opt/wks/d3/d3-book-master/d3_demo/03_dataset.html","search":"","hash":""}},
    "namespaceURI":"http://www.w3.org/1999/xhtml","_next":null,"_parent":{},
    "__data__":4},
    {"ownerDocument":{"location":{"href":"file:///opt/wks/d3/d3-book-master/d3_demo/03_dataset.html","origin":"null","protocol":"file:","host":"","hostname":"","port":"","pathname":"/opt/wks/d3/d3-book-master/d3_demo/03_dataset.html","search":"","hash":""}},"namespaceURI":"http://www.w3.org/1999/xhtml","_next":null,"_parent":{},

    "__data__":5}]],

    "_parents":[{}]}

enter选集_groups 总共有5个元素,前三为空,后两个为绑定的数据元素的对象

前面说将五个数据绑定到三个存在的元素上,后面两个数据元素,D3为其绑定一个“待初始化的对象”上。

enter选集 = 数据集合 - DOM集合 ,代表数据集合中没有绑定DOM的、未可视化的选集对象。

现在我们将集合分为三类:

enter() :  数据集合中没有绑定DOM的、未可视化的选集对象。

data()   : 数据集合中绑定DOM的、可视化的选集对象。

exit()    : DOM集合中没有关联数据的选集对象,或者是数据退出的DOM对象选集。

其他选集:

merge() : enter() 是未可视化的数据选集,那么初始化完enter()的选集后,想要一个全集时,就可以使用merge(),得到一个新旧合并的D3选集。

merge(bars)  merge的参数是一个绑定的数据的选集,merge会返回当时最新的图形和数据绑定的选集。

  1. //Select…
  2. var bars = svg.selectAll("rect")
  3. .data(dataset, keyFunc); //Bind data with custom key function

如何确定数据

data(dataset)          按数组dataset的索引确定数组,通常数组的中元素是简单类型

data(dataset,key)   按指定的方法key确定数组中的元素,通常数组中的元素是JS对象

d3基础入门一-选集、数据绑定等核心概念的更多相关文章

  1. Elasticsearch入门教程(二):Elasticsearch核心概念

    原文:Elasticsearch入门教程(二):Elasticsearch核心概念 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:ht ...

  2. D3基础入门四-事件处理

    6.5.0版 .on("mouseover", function(e,d) e: {"isTrusted":true} 第二个参考才是数据,但这在不同的环境可能 ...

  3. 2020年数据库概念与MySQL的安装与配置-从零基础入门MySQL-mysql8版本

    作者 | Jeskson 来源 | 达达前端小酒馆 从零基础入门MySQL数据库基础课 数据的概念,简介,安装与配置,Windows平台下MySQL的安装与配置. 数据库的概念:数据库是一个用来存放数 ...

  4. MyBatis基础入门《五》核心配置文件

    MyBatis基础入门<五>核心配置文件 描述: 在前面的章节中,简单的学习使用了一下mybatis,对于配置文件没有过多详细说明. 这里先描述项目中的一个核心配置文件:mybatis-c ...

  5. CSS3基础入门01

    CSS3 基础入门 01 前言 相对于css2来说,css3更新了很多的内容,其中包括选择器.颜色.阴影.背景.文本.边框.新的布局方案.2d.3d.动画等等. 而如果想要学习css3的诸多部分,不妨 ...

  6. [Spring框架]Spring AOP基础入门总结一.

    前言:前面已经有两篇文章讲了Spring IOC/DI 以及 使用xml和注解两种方法开发的案例, 下面就来梳理一下Spring的另一核心AOP. 一, 什么是AOP 在软件业,AOP为Aspect ...

  7. SpringMVC基础入门

    一.SpringMVC基础入门,创建一个HelloWorld程序 1.首先,导入SpringMVC需要的jar包. 2.添加Web.xml配置文件中关于SpringMVC的配置 1 2 3 4 5 6 ...

  8. SpringMVC基础入门,创建一个HelloWorld程序

    ref:http://www.admin10000.com/document/6436.html 一.SpringMVC基础入门,创建一个HelloWorld程序 1.首先,导入SpringMVC需要 ...

  9. 【JAVA零基础入门系列】Day6 Java字符串

    字符串,是我们最常用的类型,每个用双引号来表示的串都是一个字符串.Java中的字符串是一个预定义的类,跟C++ 一样叫String,而不是Char数组.至于什么叫做类,暂时不做过多介绍,在之后的篇章中 ...

随机推荐

  1. 【Go语言学习笔记】Go的defer

    关键字 defer ⽤于延迟一个函数或者方法(或者当前所创建的匿名函数)的执行. 注意,defer语句只能出现在函数或方法的内部. defer语句经常被用于处理成对的操作,如打开.关闭.连接.断开连接 ...

  2. ELK集群之grafana(8)

    Grafana的安装和读取ES数据 模拟es数据产生sjgtest.py import time import datetime from elasticsearch import Elasticse ...

  3. [python]Pytest+selenium+git+jenkins持续集成

    1安装pytest框架 &pip install pytest   #pytest &pip install pytest-html  #pytest html测试报告 2.工程介绍 ...

  4. Apache Shiro 反序列化漏洞分析

    Shiro550 环境搭建 参考:https://www.cnblogs.com/twosmi1e/p/14279403.html 使用Docker vulhub中的环境 docker cp 将容器内 ...

  5. 数据库学习笔记 - MySQL基础知识

    一.数据库基础知识 1.1 Whats's 数据库 数据库(Database,DB):将大量数据保存起来,通过计算机加工而成的可以进行高效访问的数据集合.如:大型-银行存储的信息,小型-电话簿. 数据 ...

  6. laravel DB 类库

    DB 类操作数据库    基本用法: DB::table('tableName'); 获取操作tableName 表        增加信息        对数据库中的某个表增加数据主要有两个函数可以 ...

  7. Python 练习 进程

    ... """ 创建2个进程, 每一个进程都打出当前的时间和进程的标识,持续打十次. """ import multiprocessing ...

  8. AtCoder Regular Contest 127

    Portal B Description 给出\(n(\leq5\times10^4),L(\leq15)\),构造\(3n\)个不同\(L\)位的三进制数,使得在这\(3n\)个数的每一位上,0/1 ...

  9. 中文NER的那些事儿5. Transformer相对位置编码&TENER代码实现

    这一章我们主要关注transformer在序列标注任务上的应用,作为2017年后最热的模型结构之一,在序列标注任务上原生transformer的表现并不尽如人意,效果比bilstm还要差不少,这背后有 ...

  10. key按键使用

    1. 按键实验 查询原理图可知KEY对应的按键和引脚,当KEY按下时,引脚为低电平,否则为高电平 2. 代码 2.1 GPIO 为了方便GPIO的编写,建立GPIO的文件夹和对应的.h和.c文件. b ...