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 ...
随机推荐
- UVA - 12263 Rankings 模拟（拓扑排序）
题意:1~n这n个数,给你一个初始的顺序,再告诉你那两个数的大小关系发生了变化,求变化后的 顺序,不存在则输出IMPOSSIBLE 思路:这题很遗憾没在比赛的时候过掉,结束后加了一行就AC了.题目真的 ...
- javascript学习笔记总结
1 有些浏览器可能不支持JavaScript,我们可以使用如下的方法对它们隐藏JavaScript代码. <html> <body> <script type=" ...
- Python正则表达式初识（五）
正则表达式的内容很丰富,今天小编继续给大家分享Python正则表达式的基础知识.今天要给大家的讲的特殊字符是竖线“|”.竖线“|”实质上是一个或的关系. 1.直接上代码演示,比方说我们需要匹配一个字符 ...
- BZOJ3435: [Wc2014]紫荆花之恋(替罪羊树，Treap)
Description 强强和萌萌是一对好朋友.有一天他们在外面闲逛,突然看到前方有一棵紫荆树.这已经是紫荆花飞舞的季节了,无数的花瓣以肉眼可见的速度从紫荆树上长了出来.仔细看看的话,这个大树实际上是 ...
- 学习TF:《TensorFlow实战》中文版PDF+源代码
深度学习乃至人工智能正逐渐在FinTech领域发挥巨大的作用,其应用包括自动报告生成.金融智能搜索.量化交易和智能投顾.而TensorFlow为金融业方便地使用深度学习提供了可能.<Tensor ...
- caioj 1063 动态规划入门（一维一边推1：美元和马克）
这道题一开始我是这么想的 最后的答案肯定是某次的马克换回来的,但这个该怎么确定?? 实际上应该把范围缩小,只看最后一次和倒数第二次之间有什么联系. 可以发现,只有两种可能,最后一天换或者不换.换的话就 ...
- 构建基于Javascript的移动CMS——加入滑动
在和几个有兴趣做移动CMS的小伙伴讨论了一番之后,我们认为当前比較重要的便是统一一下RESTful API.然而近期持续断网中,又遭遇了一次停电,暂停了对API的思考.在周末无聊的时光了看了<人 ...
- Android性能优化之提高ListView性能的技巧
ListView优化一直是一个老生常谈的问题.无论是面试还是寻常的开发中,ListView永远不会被忽略掉,那么这篇文章我们来看看怎样最大化的优化ListView的性能. 1.在adapter中的ge ...
- int long long 的取值范围
unsigned int 0-4294967295 //整型的每一种都有无符号(unsigned)和有符号(signed)两种类型(float和double总是带符号的),在默认情况下声明 ...
- /dev/shm和swap差别与联系
1.基本理论 /dev/shm这个文件是寄生虫,寄存在内存中 swap是暂时在硬盘中划分一个区域,把它作为内存使用 2.怎样查看 使用df -lh能够查看/dev/shm 使用free -m能够查看s ...