【 D3.js 入门系列 --- 2 】 怎样使用数据和选择元素
本人的个人博客首页为: http://www.ourd3js.com/ ,csdn博客首页为:http://blog.csdn.net/lzhlzz/。
转载请注明出处,谢谢。
接着上一讲的内容,这次讨论怎样选择元素和使用数据。
如今页面中有三行文字。代码为:
<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){....}
});
转载于:https://www.cnblogs.com/blfshiye/p/5401239.html
【 D3.js 入门系列 --- 2 】 怎样使用数据和选择元素相关推荐
- 【 D3.js 入门系列 --- 7 】 理解 update, enter, exit 的使用
本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 在前面几节中重复出现了例如以下代码: svg.selectAll ...
- 【 D3.js 入门系列 --- 10 】 地图的绘制
地图的制作在 D3 中可以说是最重要的一环.因为在进行数据可视化时,很多情况都会和地图联系在一起,如中国各省的人口多少,GDP多少等,都可以和地图联系在一起. D3 中制作地图所需要的文件问 JSON ...
- 【 D3.js 入门系列 --- 9 】 常见可视化图形
本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. Layout ,直译为"布局,安排".但在 ...
- 【 D3.js 入门系列 --- 4 】 怎样使用scale(比例)
本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 在上一节中使用了一个非常重要的概念 - scale (这个不知道 ...
- 【 D3.js 入门系列 --- 10.2 】 你可以拖动地图
我的个人博客是:www.ourd3js.com csdn博客为:blog.csdn.net/lzhlzz 转载请注明出处.谢谢. 本节是结合9.2节 和10节 的内容制作的一个可力学导向的中国地图,用 ...
- 数据可视化js框架 d3.js入门
数据可视化js框架 d3.js入门 [一] 选择元素绑定数据 1.下载.引入d3.js 2.d3.select():选择所有指定元素的第一个 3.d3.selectAll() :选择指定元素的全部 e ...
- 【 D3.js 进阶系列 】 进阶总结
进阶系列的文章从去年10月开始写的,晃眼又是4个多月了,想在年前总结一下. 首先恭祝大家新年快乐.今年是羊年吧.前段时间和朋友聊天,聊到十二生肖里为什么没猫,我张口就道:不是因为十二生肖开会的时候猫迟 ...
- d3.js 入门指南 - 仪表盘
D3的全称是Data-Driven Documents(数据驱动的文档),是一个用来做数据可视化的JavaScript函数库,而JavaScript文件的后缀通常为.js,所以D3被称为D3.js. ...
- d3.js 入门指南
说到数据可视化,我们会行到很多优秀的框架,像echarts.highcharts,这些框架很优雅,健壮,能满足我们对可视化的大部分需求,但是缺点也很明显,就是这些框架几乎是不可定制化的,当遇到特殊的需 ...
最新文章
- 矩阵树定理2020HDU多校第6场j-Expectation[位运算+期望]
- 高斯混合模型聚类实战(Gaussian Mixtures)
- linux 抓包文件 导出,tcpdump抓包和scp导出以及Wireshark查看
- css 一侧是三角形的矩形_5种具有CSS形状和滤镜的精美图像效果
- 20165231 2017-2018-2 《Java程序设计》第8周学习总结
- [译]R语言——Shiny框架之构建(一):1.结构——1.独立应用程序——2.双文件式Shiny应用
- Linux CentOS修改网卡IP/网关设置
- android打开cad文件怎么打开方式,dwg文件怎么打开_手机上dwg文件用什么程序可以打开...
- 【apollo6.0发行版(可以理解为简化版)安装全教程】
- noi 1.5第38题 计算多项式的导数
- 服务器DNS域名解析
- oracle 结果百分比,Oracle 百分比
- QT5.14.2使用webkit引擎完成网页浏览
- 洛谷P4495 奇怪的背包 [HAOI2018] 数论
- 草料二维码提交数据自动通知企业微信
- 机器学习笔记 - 使用python代码实现易于理解的反向传播
- 认识控制台-什么是控制台?
- excel打开密码忘记了_excel文件密码忘记了
- Cortex-M3处理器内核与基于Cortex-M3的MCU关系
- AI创意赛火热,赛事能成BAT强化AI优势的新动能?
热门文章
- JAVA时间格式的处理 SimpleDateFormat 类(小结)
- perl模块的安装,查询
- 计算机文化基础教程教案,新版《计算机文化基础》教案.doc
- Java实现算法导论中最长公共子序列(LCS)动态规划法
- 开机出现grub rescue无法进入系统 恢复ubuntu系统下grub引导 windows xp和ubuntu9.10双系统引导程序的修复
- 计算机二级考试vb内容,计算机二级考试VB重点内容.doc
- pytorch图像和张量的相互转换_如何加载图像并将其转换为PyTorch的适当张量?
- 触发器——创建||更新||删除||查看
- 线程的状态 Thread.State||NEW,RUNNABLE,BLOCKED,WAITING,TIMED_WAITING,TERMINATED
- 强!chrome彻底关闭自动升级新方法实例演示,终于解决了chrome自动升级的烦恼