【 D3.js 入门系列 --- 2 】 怎样使用数据和选择元素
2016-04-17 15:54
429 查看
本人的个人博客首页为: http://www.ourd3js.com/ ,csdn博客首页为:http://blog.csdn.net/lzhlzz/。
转载请注明出处,谢谢。
接着上一讲的内容,这次讨论怎样选择元素和使用数据。
如今页面中有三行文字。代码为:
定义一个集合set,里面有三个元素:
要用这三个字符串给分别给上面的三个<p>赋值。代码例如以下:
第二行是表明要使用数据集合set,第三行表示要改变p里的文本内容。注意到后面有一个函数funciont(d,i)。这是为了分别使用数据集合set里的元素。
假设不适用数据集合set,想要将全部文本都变为同样的字符串(如都变成China)。仅仅需:
d3.js会自己主动按先后顺序为各个p赋值的。
结果例如以下图:
如果我们想仅仅选择当中一个元素进行操作,如果仅仅想操作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){ .... } });
相关文章推荐
- 关于js对象属性
- 堆优化 Dijstra单源最短路径算法 2(邻接表)
- js keyup、keypress和keydown事件 详解
- js笔记
- JS区分浏览器页面是刷新还是关闭
- Json----Jackson 下载地址
- javascript VS java
- js组件SlotMachine实现图片切换效果制作抽奖系统
- JSP原理和语法
- move.js
- jsp页面中的EL表达式不被解析的问题
- js实现鼠标监听
- JS中取二维数组中最大值的方法汇总
- 最简单js代码实现select二级联动下拉菜单
- JS正则表达式——学习笔记
- JavaScript专业规则12条
- JS基础回顾(二)--数组
- 使用Jsoup对豆瓣读书进行爬虫
- HDU 2112.HDU Today【最短路径(Dijsktra算法+字符串)】【4月17】
- JavaScript简介