D3.js中对array的使用
由于D3类库和array密切相关，我们有必要讨论一下D3中的数据绑定以及在数组内部运算的方法。
1.D3中的数组
和其他编程语言一样，D3的数组元素可以是数字或者字符等类型，例如：
someData=[20,36,48,59,600,88];
此外，考虑json数据在网络传输中的便利性，D3数组也支持将json对象，如：
someBook=[{name:"book1", price: 50}, {name:"book2", price: 150}, {name:"book3", price: 350}];
2.D3中的数组过滤功能
array有一个filter（）方法，这个方法的返回值是array中满足自定义需求的数据数组。例如：
someNumer.filter(function(sn) {return sn >= 40});
这条语句中使用了someNumber这个array的filter方法，它使用了一个function，此function中将someNumber中的每一个元素（命名为sn）进行遍历，如果满足自定义条件（大于等于40），则将此元素拷贝至一个新建的数组中，最后的返回值便是这个数组。
3.绑定,enter()和exit()
D3使用data()方法将数组和选择的CSS元素进行绑定；
enter()方法定义了当数组元素超过已经绑定或者选择的CSS元素的个数时，则生成新的CSS元素，使用新CSS元素与数组中数据进行绑定；
exit()方法定义了当数组元素超过已经绑定或者选择的CSS元素的个数时，则抛弃多余的数组元素。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script type="text/javascript" src="d3.js"></script> </head>
<style>
#borderdiv {
width: 200px;
height: 50px;
border: 1px solid gray;
}
</style> <body>
<div id="borderdiv"> </div>
</body> <script>var someNumbers = [17, 82, 9 ,500, 40];
var smallerNumers = someNumbers.filter(function(e1){return e1 <= 40 ? this : null});
d3.select("body").selectAll("div")
.data(smallerNumers)
.enter()
.append("div")
.html(function(sd) {return sd})
.style("font-weight", "900");
</script> </html>
上面的代码中，smallerNumber中将会含有17,9,40三个元素，但是只有broderdiv这一个div，所以当执行上面的脚本后，会为9和40新生成两个div。如图
当然，如果将上述代码中的enter()方法替换为exit(), 那么9和40将被丢弃，不会生成新的div。
D3.js中对array的使用的更多相关文章
- js中的Array
js中的Array 啥是ArrayLike对象 类似,下面这种对象的就是ArrayLike var arraylike = { 0: "a", 1: "b", ...
- js中数组Array的一些常用方法总结
var list = new Array()是我们在js中常常写到的代码,今天就总结一下Array的对象具有哪些方法. list[0] = 0; list[1] = 1; list[2] = 2; 或 ...
- D3.js的v5版本入门教程（第十二章）—— D3.js中各种精美的图形
D3.js的v5版本入门教程(第十二章) D3中提供了各种制作常见图形的函数,在d3的v3版本中叫布局,通过d3.layout.xxx,来新建,但是到了v5,新建一个d3中基本的图形的方式变了(我也并 ...
- JS中数组Array的用法{转载}
js数组元素的添加和删除一直比较迷惑,今天终于找到详细说明的资料了,先给个我测试的代码^-^var arr = new Array();arr[0] = "aaa";arr[1] ...
- JS中数组Array的用法示例介绍 （转）
new Array() new Array(len) new Array([item0,[item1,[item2,...]]] 使用数组对象的方法: var objArray=new Array() ...
- JS中数组Array的用法
js数组元素的添加和删除一直比较迷惑,今天终于找到详细说明的资料了. var arr = new Array(); // 初始化数组arr[0] = "aaa";arr[1] = ...
- D3学习之：D3.js中的12中地图投影方式
特别感谢:1.[张天旭]的D3API汉化说明.已被引用到官方站点: 2.[馒头华华]提供的ourd3js.com上提供的学习系列教程,让我们这些新人起码有了一个方向. 不得不说,学习国外的新技术真的是 ...
- js中关于array的常用方法
最近总结了一些关于array中的常用方法, 其中大部分的方法来自于<JavaScript框架设计>这本书, 如果有更好的方法,或者有关于string的别的常用的方法,希望大家不吝赐教. 第 ...
- JS中部分 Array 对象方法介绍
1.concat() concat() 方法用于连接两个或多个数组.该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本 <script type="text/javascrip ...
随机推荐
- js插件---图片裁剪photoClip
js插件---图片裁剪photoClip 一.总结 一句话总结:页面裁剪图片得到base64格式的图片数据,然后把这个数据通过ajax上传给服务器,服务器将base64图片数据解析成图片并且保存到服务 ...
- Sql Server新手学习入门
Sql Server新手学习入门 http://www.tudou.com/home/_117459337
- WISP > Client+AP > WDS 的区别
最直白易懂的分别:WISP > Client+AP > WDS WISP,真正万能,兼容任何厂牌的上级AP,毋须设置上级AP,不受上级AP的信道影响,自由DHCP,所带机器或设备的IP,上 ...
- 学习《深度学习与计算机视觉算法原理框架应用》《大数据架构详解从数据获取到深度学习》PDF代码
<深度学习与计算机视觉 算法原理.框架应用>全书共13章,分为2篇,第1篇基础知识,第2篇实例精讲.用通俗易懂的文字表达公式背后的原理,实例部分提供了一些工具,很实用. <大数据架构 ...
- 无闻go编程基础笔记
Go语言做Web编程非常方便,并且在开发效率和程序运行效率方面都非常优秀.相比于Java,其最大的优势就是简便易用,而相比于PHP,它最大的优势就是性能好. (go做web)推荐Gorilla的库,里 ...
- scp---远程拷贝文件
scp命令用于在Linux下进行远程拷贝文件的命令,和它类似的命令有cp,不过cp只是在本机进行拷贝不能跨服务器,而且scp传输是加密的.可能会稍微影响一下速度.当你服务器硬盘变为只读read onl ...
- QQ空间说说爬虫
QQ空间说说爬虫 闲来无事,写了一个QQ空间的爬虫,主要是爬取以前的说说,然后生成词云. 这次采用的主要模块是selenium,这是一个模拟浏览器的模块,一开始我不想用这个模块写的,但是后面分析的时候 ...
- JAVA多态学习1
多态–概念 所谓多态.就是指一个引用(类型)在不同情况下的多种状态. 也能够理解成:多态是指通过指向父类的指针,来调用在不同子类中实现的方法. 实现多态有两种方式:1.继承.2.接口 这一次我们先来演 ...
- Apache Spark 1.6公布(新特性介绍)
Apache Spark 1.6公布 CSDN大数据 | 2016-01-06 17:34 今天我们很高兴可以公布Apache Spark 1.6,通过该版本号,Spark在社区开发中达到一个重要的里 ...
- 目标决定人生——没有目标就失去一切 （没有目标的奋斗是浪费青春，比如交了钱却不去参加考试、让时间白白溜走。根据目标与定位来选择最合适的企业。人生要算总账）good
没有目标就失去一切 刚毕业那会儿,幼稚得可笑,老跟同学打电话,明面上聊聊近况,暗地里比较.你要比我工资多一百块,心里特不平衡,凭什么呀,在学校那会儿公认的我比你强.你要带个头衔,而我啥也不是,普通员工 ...