由于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 in action

D3.js中对array的使用的更多相关文章

  1. js中的Array

    js中的Array 啥是ArrayLike对象 类似,下面这种对象的就是ArrayLike var arraylike = { 0: "a", 1: "b", ...

  2. js中数组Array的一些常用方法总结

    var list = new Array()是我们在js中常常写到的代码,今天就总结一下Array的对象具有哪些方法. list[0] = 0; list[1] = 1; list[2] = 2; 或 ...

  3. D3.js的v5版本入门教程（第十二章）—— D3.js中各种精美的图形

    D3.js的v5版本入门教程(第十二章) D3中提供了各种制作常见图形的函数,在d3的v3版本中叫布局,通过d3.layout.xxx,来新建,但是到了v5,新建一个d3中基本的图形的方式变了(我也并 ...

  4. JS中数组Array的用法{转载}

    js数组元素的添加和删除一直比较迷惑,今天终于找到详细说明的资料了,先给个我测试的代码^-^var arr = new Array();arr[0] = "aaa";arr[1] ...

  5. JS中数组Array的用法示例介绍 （转）

    new Array() new Array(len) new Array([item0,[item1,[item2,...]]] 使用数组对象的方法: var objArray=new Array() ...

  6. JS中数组Array的用法

    js数组元素的添加和删除一直比较迷惑,今天终于找到详细说明的资料了. var arr = new Array();  // 初始化数组arr[0] = "aaa";arr[1] = ...

  7. D3学习之：D3.js中的12中地图投影方式

    特别感谢:1.[张天旭]的D3API汉化说明.已被引用到官方站点: 2.[馒头华华]提供的ourd3js.com上提供的学习系列教程,让我们这些新人起码有了一个方向. 不得不说,学习国外的新技术真的是 ...

  8. js中关于array的常用方法

    最近总结了一些关于array中的常用方法, 其中大部分的方法来自于<JavaScript框架设计>这本书, 如果有更好的方法,或者有关于string的别的常用的方法,希望大家不吝赐教. 第 ...

  9. JS中部分 Array 对象方法介绍

    1.concat() concat() 方法用于连接两个或多个数组.该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本 <script type="text/javascrip ...

随机推荐

  1. centos7 keepalive双机热备~

    简单实现Keepalive双击热备~ 摘要:准备两台虚拟机A:192.168.161.7  B:192.168.161.35  虚拟ip:192.168.161.10 keepalive进程 具体关于 ...

  2. mysql 5.6 安装教程

    首先是下载 mysql-installer-community-5.6.14.0.msi ,大家可以到 mysql 官方网去下载,也可以到笔者所提供的地址去下载,下载方法在这里就不多说了,我想大家都明 ...

  3. POJ Euro Efficiency 1252

    Euro Efficiency Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 4109   Accepted: 1754 D ...

  4. 学习《R数据科学》高清中文PDF+高清英文PDF+源代码

    学习R有不会的就查工具书<R数据科学>, 工具不是重点,创造价值才是目的.具体到数据科学,表现形式往往是提供解决方案或者做出某种决策.至于使用什么语言,采用什么工具,不本质.用 R 还是 ...

  5. django项目所遇问题总结

    2. 关于设置static静态文件,样式失效问题 原因: 可能开启多个端口号,页面显示访问的不是已经设置了static的模板,所以,样式没有显示 3. models模型中gender字段的选择设置 c ...

  6. Introducing ASLR for FreeBSD

    Shawn WebbOliver Pinter10 July 2014http://www.hardenedbsd.org/ [ 1. Introduction ]Security in FreeBS ...

  7. 大型情感类电视连续剧--Android高德之旅（2）地图类型

    总要说两句 今天继续我们的Android高德之旅,上一篇已经能够显示最主要的地图了.有主要的放大缩小功能.还有最后做的点击3D旋转.倾斜视角的效果.今天这篇文章来记录一下高德地图的5种地图类型. (其 ...

  8. [UnityUI]循环滑动列表

    效果图: 使用的是UGUI和DOTween 当中比較关键的是循环滑动和层次排序: 1.循环滑动:这里先如果显示五张图片.分别标记为0,1,2,3,4,那么当向左滑动时,序列就变为1,2,3,4,0,这 ...

  9. Windows下快速安装CACTI流量监控

    Windows下快速安装CACTI流量监控 原文  http://os.51cto.com/art/201111/300977.htm CACTI是一套PHP程序,它利用SNMPGET采集数据,使用R ...

  10. 6.前端开发必备！Emmet使用手册

    转自:https://www.w3cplus.com/tools/emmet-cheat-sheet.html 介绍 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个 ...