【 D3.js 选择集与数据详解 — 1 】使用datum()绑定数据 - 相关文章

【【 D3.js 选择集与数据详解 — 1 】使用datum()绑定数据】的更多相关文章

【 D3.js 选择集与数据详解 — 1 】使用datum()绑定数据

选择集和数据的关系是 D3 最重要的基础,在[入门 - 第 7 章]时进行过些许讲解,对于要掌握好 D3 是远远不够的.故此开设一个新的分类,专门讨论选择集与数据的关系,包括数据绑定的使用和工作原理,update .enter.exit 的原理和使用方法等,接下来一段时间里会有多篇此类文章. D3 最大的特色就是能够将数据绑定到DOM上.使用select或selectAll选择元素之后,被选择的元素上是没有数据的.数据绑定就是使被选择元素里包含有数据.与此相关的函数有两个: datum():将指…

【 D3.js 选择集与数据详解 — 5 】处理模板的应用

在[选择集与数据 - 4]一文中,介绍了一个update.enter.exit的处理模板,这个模板很常用,本文将通过一个例子来讲解其使用方法. 1. 模板复习一下上一章提到的模板. //绑定数据后,分别返回update.enter.exit部分 var update = selection.data(dataset); var enter = update.enter(); var exit = update.exit(); //1.update部分的处理方法 update.text( fun…

【 D3.js 选择集与数据详解 — 4 】 enter和exit的处理方法以及处理模板

绑定数据之后,选择集分为三部分:update.enter.exit.这三部分的处理办法是什么呢?本文将讲解其处理方法,以及一个常用的处理模板. 1. enter的处理方法如果没有足够的元素,那么处理方法通常是使用append()添加元素.请看下面的代码: <body> <p></p> <script> var dataset = [3, 6, 9]; var p = d3.select("body").selectAll("p…

【 D3.js 选择集与数据详解 — 3 】绑定数据的顺序

data() 函数有两个参数,第一个是被绑定数据,第二个参数用于指定绑定的顺序.在数据需要更新的时候常常会用到. 默认的情况下,data()函数是按照索引号依次绑定数组各项的.第0个元素绑定数组的第0项,第1个元素绑定数组的第1项,依此类推.也可以不按照此顺序进行绑定,这就要用到data()的第二个参数.这个参数是一个函数,称为键函数(key function). 要注意,只有在选择集原来已经绑定有数据的情况下,才能使用键函数指定绑定的顺序.请看以下代码: <body> <!-- 三个空…

【 D3.js 选择集与数据详解 — 2 】使用data()绑定数据

D3 中绑定数据大多是由 data() 函数来完成的,它是怎样工作的,它与 datum() 有什么区别呢? data()函数能够将数组各项分别绑定到各元素上,而且能够设置绑定的规则.data()还能够处理数组长度与元素数量不一致的情况.当数组长度大于元素数量,能为多余数据预留元素位置,以便将来插入新元素:当数组长度小于元素数量时,能提供指向多余元素的方法,以便将来删除.下面来剖析data()是如何绑定数据的,相比datum()有哪些新功能. data()的工作过程假设body中有三个段落元素p…

MySQL数据库使用mysqldump导出数据详解

mysqldump是mysql用于转存储数据库的实用程序.它主要产生一个SQL脚本,其中包含从头重新创建数据库所必需的命令CREATE TABLE INSERT等.接下来通过本文给大家介绍MySQL数据库使用mysqldump导出数据详解,需要的朋友一起学习吧 mysqldump是mysql用于转存储数据库的客户端程序.它主要产生一系列的SQL语句,可以封装到文件,该文件包含有所有重建您的数据库所需要的 SQL命令如CREATE DATABASE,CREATE TABLE,INSERT等等.可…

微信JS接口汇总及使用详解

这篇文章主要介绍了微信JS接口汇总及使用详解,十分的全面.详尽,包含分享到朋友圈,分享给朋友,分享到QQ,拍照或从手机相册中选图,识别音频并返回识别结果,使用微信内置地图查看位置等接口,有需要的小伙伴参考下吧基本说明使用说明 1.引入JS文件在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.0.0.js 备注:支持使用 AMD/CMD 标准模块加载方法加载 2.注入配置config接口所有需要使用J…

Apache + Tomcat集群配置详解（1）

一.软件准备 Apache 2.2 : http://httpd.apache.org/download.cgi,下载msi安装程序,选择no ssl版本 Tomcat 6.0 : http://tomcat.apache.org/download-60.cgi,下载Tomcat 6.0.18 zip文件注意:由于Apache和Tomcat项目与集群相关的模块均处于持续发展和优化过程中,因此笔者不保证本文配置方法对所有Apache和Tomcat版本均适用. 二.软件安装把Apache安装为运…

ext.js的mvc开发模式详解

ext.js的mvc开发模式详解和环境配置在JS的开发过程中,大规模的JS脚本难以组织和维护,这一直是困扰前端开发人员的头等问题.Extjs为了解决这种问题,在Extjs 4.x版本中引入了MVC开发模式,开始将一个JS(Extjs)应用程序分割成Model-View-Controller三层,为JS应用程序的如何组织代码指明了方向,同时使得大规模JS代码变得更加易于重用和维护:这就是Extjs MVC开发模式的初衷. 找了很多博客才找到能让新手也容易理解的从传统的html,css,js引入的…

Solr系列二：solr-部署详解（solr两种部署模式介绍、独立服务器模式详解、SolrCloud分布式集群模式详解）

一.solr两种部署模式介绍 Standalone Server 独立服务器模式:适用于数据规模不大的场景 SolrCloud 分布式集群模式:适用于数据规模大,高可靠.高可用.高并发的场景二.独立服务器模式详解 1. 独立服务器模式架构说明: 1.每个solr服务器实例(启动的一个solr服务器进程)都有一个solr主目录(系统变量名为:solr.solr.home).启动服务器实例时须为实例指定主目录(默认为:server/solr目录). 2.solr主目录中存放该服务器实例托管的内…