D3 data()

与datum()的区别

假设要绑定的数组为[3,6,9],那么我们希望第一个p元素绑定3,第二个绑定6,第三个绑定9。这种情况就需要使用data()函数,如果使用datum(),则会将数组本身绑定到各元素上,即第一个p元素绑定[3,6,9],第二个绑定[3,6,9],第三个也是绑定[3,6,9]。

借用:http://www.ourd3js.com/wordpress/?p=797 的图

data()函数返回一个对象,对象里包含update部分和两个函数。一个是enter()函数,返回enter部分,还有update属性,一个是exit()函数,返回exit部分。

data()的第二个参数:键函数

http://www.ourd3js.com/wordpress/?p=811 讲的很详细

绑定的顺序不按照索引号绑定,而是使值依次对应。数据更新时会有用。

enter的处理方法

场景:数据多,元素少。

append()添加元素

exit的处理方法

场景:数据少,元素多。

remove()删除元素

一套处理的模板:结果是,能保证一个数据对应一个元素。

var dataset = [10, 20, 30];
var p = d3.select("body").selectAll("p");

//绑定数据后,分别返回update、enter、exit部分
var update = p.data(dataset);
var enter = update.enter();
var exit = update.exit();

//1.update部分的处理方法
update.text( function(d){ return d; } );

//2.enter部分的处理方法
enter.append("p")
	.text( function(d){ return d; } );

//3.exit部分的处理方法
exit.remove();

  

时间: 2024-10-11 16:44:14

D3 data()的相关文章

D3 & Data Visualization in Ext JS

通过适配器可以在ExtJs中轻松的集成D3的展示能力 http://video.sencha.com/watch/zvUjnFJ91xVvuwdTh2zjqP?mkt_tok=eyJpIjoiWm1aaE1USmxNalZrWkRjeiIsInQiOiJjN0pTRHUrd2dWNjA3VVFDaitidTJ3QVd2NnJUMjk4SmF4SUlcL1BNbHdOcURNblViZVJNUTljakVvZGVpVXF3am1FQXlyWGthNmw5WXI3aVRFMFBTbTZhWmZ2eC

55个最实用大数据可视化分析工具

该文转自[IT168 技术] 近年来,随着云和大数据时代的来临,数据可视化产品已经不再满足于使用传统的数据可视化工具来对数据仓库中的数据抽取.归纳并简单的展现.传统的数据可视化工具仅仅将数据加以组合,通过不同的展现方式提供给用户,用于发现数据之间的关联信息.新型的数据可视化产品必须满足互联网爆发的大数据需求,必须快速的收集.筛选.分析.归纳.展现决策者所需要的信息,并根据新增的数据进行实时更新.因此,在大数据时代,数据可视化工具必须具有以下特性: (1)实时性:数据可视化工具必须适应大数据时代数

单片机教程.指针的基础与1602液晶的初步认识

指针的基础与1602液晶的初步认识 我们在上C语言课的时候,学到指针,每一位教C语言的老师都会告诉我们一句:指针是C语言的灵魂.由此可见,指针是否学会是判断一个人是否真正学会C语言的重要指标之一,但是很多同学只知道其重要性,却没学会其灵活性. 简单的程序,100来行代码,不需要指针我们可以轻松搞定,但是当代码写到几千上万行甚至更多的时候,利用指针就可以直接而快速的处理内存中的各种数据结构中的数据,特别是数组.字符串和内存的动态分配等,它为函数之间各类数据传递提供了简洁便利的方法.说了这么多作用估

Diablo3 英雄榜-显示用户的装备信息-Volley读取API的图片资源,使用MySingleton管理RequestQueue

Diablo3 英雄榜-显示用户的装备信息 -Volley读取API的图片资源 本章目标: 使用一个类来管理RequestQueue 完成Diablo3英雄榜的装备界面概览界面 进一步的熟悉暴雪API 源起 在之前我们提到过使用Volley获取Json数据.参看 Diablo3英雄榜-使用Volley和Gson来处理暴雪API的Json数据 在返回的数据不是立刻返回的.返回后的事件事实上是在onResponse()中来处理.现在我们要实现多个资源同时来请求,每个请求都有自己的Request,那么

ggplot2包--R可视化

1.ggplot2发展历程 ggplot2是Hadley在爱荷华州立大学博士期间的作品,也是他博士论文的主题之一,实际上ggplot2还有个前身ggplot,但后来废弃了,某种程度上这也是Hadley写软件的特 征,熟悉他的人就知道这不是他第一个“2”版本的包了(还有reshape2).带2的包和原来的包在语法上会有很大的改动,基本上不兼容.尽管如此,他的R代码风格在R社区可谓独树一帜,尤其是他的代码结构很好,可读性很高,ggplot2是R代码抽象的一个杰作.读者若感兴趣,可以在GitHub网站

windows下搭建node.js及npm的工作环境

最近在研究数据可视化D3框架,决定在windows下搭建一个nodejs及npm的工作环境,在网上查了n篇文章,别管是编译源码安装也好,还是使用node.msi格式安装包也好,总是有问题.最终,功夫不负有心人,还是搭建完成了.作为新手,其实我也不知道这样搭建对不对,但是运行'npm install'反正不出错了. 下面就把我的一些搭建过程说一下: 下载node.js.在http://nodejs.org/download/下载最新版的node.exe文件,我下载时是v0.10.33.下载完成后,

初次接触nodejs,请多指教。

一  安装nodejs 1.下载node.js.在http://nodejs.org/download/下载最新版的node.exe文件,我下载时是v0.10.33.下载完成后,在F盘新建nodejs文件夹,将node.exe放到该文件夹下.同时将F:\nodejs添加到环境变量的PATH中. 2.下载npm.在http://nodejs.org/dist/npm/下载最新版的npm.我下载时的版本是npm-1.4.9.zip.下载完成后,解压到nodejs文件夹中,形成了如下目录,同时添加环境

稀疏自动编码之练习

从10幅图像中采样出10000幅小图像块,每个小图像块大小是8*8,利用采样出的图像作为样本学习,利用LBFGS进行优化. 下面是对10幅图像白化之后的结果: train.m %% CS294A/CS294W Programming Assignment Starter Code % Instructions % ------------ % % This file contains code that helps you get started on the % programming ass

Diablo 3 Web API

这是暴雪提供的WebAPI,可以通过网页的方式访问玩家的用户信息,结构相当清晰,很有借鉴价值. 应用JSON(JavaScript Object Notation)做数据交换,非常好理解. 以我的暗黑3账号为例: http://tw.battle.net/api/d3/profile/LEG-3847/hero/23228797; 结构是 battletag-name ::= <regional battletag allowed characters> battletag-code ::=