D3.jsdata（）⽅法详解
Binding data（数据绑定）
D3各种图表的作⽤体现在将数据(Data)转换成可视化的过程。
⽐如将⼀个⽉的⽓温数据，通过树形图来展现，能够直观的看到⽓温⾛势，下个⽉还需不需要穿秋裤 :)
我们通过D3的 selection.data() ⽅法来将 data 绑定到 DOM 元素。因此，⼀个绑定过程的必要条件既是：data 和 DOM⽬标元素
（没有⽬标元素，你还bind个卵~）。
从Data说起...
D3还是很聪明的，可以处理多种data类型，像数组、字符串、对象类型。同样可以优雅的接受JSON，更⽜B的是它拥有⾃⼰的内部⽅
法，可以直接加载CSV⽂件（当然需要load CSV⽂件就不是我们在桌⾯创建个index.html然后⽤chrome打开那么easy了，你需要⼀个应
⽤server，通过http还是https来获取CSV并加载了）。
这⾥我们先准备⼀个简单的数组吧
var dataset = [1, 2, 3, 4, 5];
既然上⾯都有⼀⾏code了，看了免不了还要写点代码了。我们要把上⾯的数组跟谁绑定呢？
d3.select("body").selectAll("p")
你会说p都没append，哪来selectAll("p")，这是个问题，D3当然考虑到这⼀点了啊
d3.select("body").selectAll("p")
.data(dataset)
.enter()
.append("p")
.text("say say say you love me");
js获取json的key和value enter()是个神奇的⽅法，运⾏上⾯的代码，你的页⾯应该打印出5⾏ "say say say you love me", 不顾⼀切，狠狠爱（有没有⼀种忍
不住唱出了的冲动）
d3.select("body") // 查DOM中的body元素，返回body的引⽤
.selectAll("p") //选中DOM中的所有p标签，当DOM中不存在p时，那么这个返回值将是null
.data(dataset) //计算并且传递dataset的纸，数组长度为5，因此所有经过此节点的处理过程将处理5次，每次对应数组中不同的元素值
.enter() //创建新的DOM元素，当dataset的数据被传递⾄此，数组中的元素个数多于DOM中已有的p个数，enter()将会创建新的p元素来补充（推荐Googl .append("p") //这⾥的p当然就是不够分时就创建⼀个的意思啦。。。
.text("say say say you love me") //这个谁给解释⼀下 :o
使⽤你的
完成了上⾯的逻辑，你应该会问 “本吊load上了data，仅仅只是for-each⼀下？”
⾮也，下⾯我们开始使⽤上⾯load的数据
d3.select("body").selectAll("p")
.data(dataset)
.enter()
.append("p")
.text(function(d){return "say say say you love me "+d+" times"}); //⽅法中的参数d既是dataset中对应索引位置的元素值
// .text(function(d, i){return "sample"}) 这⾥可以看到另⼀个参数i, i在此处的值表⽰的是当前 d 元素在 dataset 中的索引位置
通过上⾯⼀段代码，任何时候，在调⽤data()⽅法之后，创建匿名⽅法，并将d作为参数传递进去，data() ⽅法将可以保证每次传递进去的参数 d 是 dataset 中对应的元素。好吧，我承认上⾯text()中定义的匿名函数有点low，不够炫酷。。。
在text()⽅法中，⼼细的你也许会有疑问，为什么不直接写 .text("say say say you love me "+d+" times"); 原因是D3的许多⽅法，包括 .text() / .attr() 等它们都可以将⼀个⽅法作为参数，当然参数也可以是⼀个字符串(不包含运算的)。
关于除 array 以外的数据结构处理⽅式在实际应⽤中使⽤的并不是很多，⽐如简单的 key/value 对象类型，我们可以通过 d3.keys(data)⽅法来获取各个value值。实际应⽤中还是需要根据⾃⼰的实际需求来组织便于处理的数据结构。
以上仅仅是⼀个D3内置data()⽅法的简单总结，便于快速⼊门，D3的⾼深远不⽌于此。拙笔之作，不对之处望海涵 :)
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论