【 D3.js 入门系列 --- 2 】 如何使用数据和选择元素
2014-05-29 14:31
459 查看
本人的个人博客首页为: http://www.ourd3js.com/ ,csdn博客首页为:http://blog.csdn.net/lzhlzz/。转载请注明出处,谢谢。
接着上一讲的内容,这次讨论如何选择元素和使用数据。
现在页面中有三行文字,代码为:
定义一个集合set,里面有三个元素:
要用这三个字符串给分别给上面的三个<p>赋值,代码如下:
如果不适用数据集合set,想要将所有文本都变为相同的字符串(如都变成China),只需:
结果如下图:
如果我们想只选择其中一个元素进行操作,假设只想操作Hello World 3,怎么办呢?
有两种方法:
一、为第三个p赋予一个id,即
二、在function(d,i)里操作,例如
接着上一讲的内容,这次讨论如何选择元素和使用数据。
现在页面中有三行文字,代码为:
<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){ 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){ .... } });
相关文章推荐
- 【 D3.js 入门系列 --- 2 】 如何使用数据和选择元素
- 【 D3.js 入门系列 --- 2 】 怎样使用数据和选择元素
- 【 D3.js 入门系列 --- 2.1 】 关于如何选择,插入,删除元素
- 【 D3.js 入门系列 --- 2.1 】 关于如何选择,插入,删除元素
- 【 D3.js 入门系列 — 2 】 绑定数据和选择元素
- 【 D3.js 入门系列 --- 2.1 】 关于怎样选择,插入,删除元素
- 【 D3.js 入门系列 — 4 】 如何使用比例尺( scale )
- D3.js系列——初步使用、选择元素与绑定数据
- 【 D3.js 入门系列 — 2.1 】 选择、插入、删除元素
- 【 D3.js 入门系列 --- 4 】 如何使用scale(比例)
- 【 D3.js 入门系列 --- 4 】 如何使用scale(比例)
- [.NET MVC4 入门系列03]使用Controller访问Model中数据
- Android学习-----如何使用sqlite进行后台数据交互,sqlite入门使用例程
- [07] 使用 MVC 5 的 EF6 Code First 入门 系列:为ASP.NET MVC应用程序读取相关数据
- 【 D3.js 选择集与数据详解 — 1 】 使用datum()绑定数据
- [01] 使用 MVC 5 的 EF6 Code First 入门 系列:建立一个EF数据模型
- 【 D3.js 入门系列 --- 7 】 理解 update, enter, exit 的使用
- [06] 使用 MVC 5 的 EF6 Code First 入门 系列:为ASP.NET MVC应用程序创建更复杂的数据模型
- 【 D3.js 入门系列 --- 5 】 如何添加坐标轴
- 如何解决FormView中实现DropDownList连动选择时出现 "Eval()、XPath() 和 Bind() 这类数据绑定方法只能在数据绑定控件的上下文中使用" 的错误