[2] D3.js中如何使用数据和选择元素
浏览数：23 /
时间：2015年06月09日
对D3.js或数据可视化有兴趣的朋友欢迎到 www.ourd3js.com 讨论。
接着上一讲的内容，这次讨论如何选择元素和使用数据。
现在页面中有三行文字，代码为：
<p>Hello World 1</p> <p>Hello World 2</p> <p>Hello World 3</p>
定义一个集合set，里面有三个元素：
var set = ["I like dog","I like cat","I like snake"];
要用这三个字符串给分别给上面的三个<p>赋值，代码如下：
var sp = d3.select("body").selectAll("p"); //选择元素
sp.data(set) //使用数据集合
.text(function(d,i){
<span style="white-space:pre"> </span>return d;
}); 上面第一行表示的是选择body里的所有p，再将这个集合赋值给一个变量p。第二行是表明要使用数据集合set，第三行表示要改变p里的文本内容。注意到后面有一个函数funciont(d,i)，这是为了分别使用数据集合set里的元素。
如果不适用数据集合set，想要将所有文本都变为相同的字符串（如都变成China），只需：
sp.text("China"); 即可。如果要使用集合分别赋值，要使用函数function(d,i)，这个函数的第一个参数的意思是datum（数据）,第二个参数的意思是index（索引），要注意，当使用数据函数data指定了数据后，数据集合set和你选择的p集合是一一对应的（如果set和p的数量正好一致的情况，不一样的情况以后再讨论）。函数里面只有一个语句 return d； ， 表示直接返回数据，意思是对于每一个索引i，都直接返回数据d。 d3.js会自动按先后顺序为各个p赋值的。
结果如下图：
如果我们想只选择其中一个元素进行操作，假设只想操作Hello World 3，怎么办呢？
有两种方法：
一、为第三个p赋予一个id，即
<p id="p3">Hello World 3</p>再选择
var sp = d3.select("body").select("#p3"); //选择元素再进行操作即可。
二、在function(d,i)里操作，例如
sp.text(function(d,i){
if(i==2){
....
}
}); 郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
