D3.js 从P元素的创建开始(显示可加载数据)


Posted in Javascript onOctober 30, 2014

D3是一个基于数据操作的可视化js库,认识d3,就从最基础的显示可加载数据谈起。

html的基本框架不多说,先上代码再解释:

新建一个test目录,在该目录下创建demo和d3两个文件夹。demo存放要编写的html文件 , d3存放d3.v3.js

在demo文件夹下新建indexP.html,将下面代码复制其中,双击在浏览器打开查看效果。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>D3: Setting paragraphs' style conditionally, based on data</title> 
<script type="text/javascript" src="../d3/d3.v3.js"></script> 
</head> 
<body> 
<script type="text/javascript"> 

var dataset = [ 5, 10, 15, 20, 25 ]; 

d3.select("body").selectAll("p") 
.data(dataset) 
.enter() 
.append("p") 
.text(function(d) { 
return "I can count up to " + d; 
}) 
.style("color", function(d) { 
if (d > 15) { //Threshold of 15 
return "red"; 
} else { 
return "black"; 
} 
}); 

</script> 
</body> 
</html>

这个简单demo实现的功能:在body中添加p标签,在p标签中添加d3加载的文本内容,并根据函数设置条件对文字颜色进行调整。

上面的网页代码,body里面的js代码,是展现到页面的数据操作。以后的不少例子,只要修改这一块便可,其他部分可看做页面框架。

这里的内容上篇文章大体都讲到了,使用d3的连缀,将同一对象的一步步数据操作连接起来,便于维护。

d3.select("body") 选择body元素,并连缀到下一方法

.selectAll("p") 选中所有段落

.data(dataset) 解析加载数组数据,该数组长度是5, 以后连缀的每个方法都将执行五次,按数组下标依次针对数组元素执行方法操作

.enter() 创建新的绑定数据的占位元素(相当于创建暂时不知名标签5个)。

创建的个数 要根据选择的已有标签数和加载的数据数组长度决定。

如本例,如果body中p标签少于5个,就创建(现在body中p为0个,故创建5个),

多于就不创建,最后的占位元素和p元素总个数要为5。

.append("p") 将占位元素改为p元素

.text(function(d) {}) 对每个段落的显示内容,写个匿名函数控制,一般返回字符串。在该方法你可以 任意编写,

本例让他每段落输出I can count up to 加上相应数组元素值

函数格式是固定的,function(d)只有这样,才能将数据加载到函数中。

.style("color","") 设置css的文本颜色属性,同text一样,设置的字符串都可以用function进行你想要的操作。本例中,如果该段落所对应的传入数值大于15,就把该行变红

最后,我们看到的效果就是如图:

D3.js 从P元素的创建开始(显示可加载数据)

本文就介绍到这里,下文介绍如何在SVG中绘制圆,以及圆圆相连的简单用力图

Javascript 相关文章推荐
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
Nov 06 Javascript
从js向Action传中文参数出现乱码问题的解决方法
Dec 29 Javascript
js取值中form.all和不加all的区别介绍
Jan 20 Javascript
PHP+mysql+Highcharts生成饼状图
May 04 Javascript
JS获取及验证开始结束日期的方法
Aug 20 Javascript
JS控制TreeView的结点选择
Nov 11 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
Dec 16 Javascript
微信小程序 基础知识css样式media标签
Feb 15 Javascript
基于vue的换肤功能的示例代码
Oct 10 Javascript
解决webpack无法通过IP地址访问localhost的问题
Feb 22 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
微信小程序地图绘制线段并且测量(实例代码)
Jan 02 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
Oct 30 #Javascript
如何调试异步加载页面里包含的js文件
Oct 30 #Javascript
fckeditor粘贴Word时弹出窗口取消的方法
Oct 30 #Javascript
js中style.display=&quot;&quot;无效的解决方法
Oct 30 #Javascript
Js实现网页键盘控制翻页的方法
Oct 30 #Javascript
javascript实现iframe框架延时加载的方法
Oct 30 #Javascript
js中iframe调用父页面的方法
Oct 30 #Javascript
You might like
php eval函数用法 PHP中eval()函数小技巧
2012/10/31 PHP
thinkphp3.0 模板中函数的使用
2012/11/13 PHP
PHP laravel中的多对多关系实例详解
2017/06/07 PHP
redis+php实现微博(一)注册与登录功能详解
2019/09/23 PHP
JS代码放在head和body中的区别分析
2011/12/01 Javascript
Fixie.js 自动填充内容的插件
2012/06/28 Javascript
JavaScript对内存分配及管理机制详细解析
2013/11/11 Javascript
js模拟hashtable的简单实例
2014/03/06 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
2014/06/05 Javascript
javascript实现随时变化着的背景颜色
2015/04/02 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
2016/02/18 Javascript
JS三级可折叠菜单实现方法
2016/02/29 Javascript
vue.js中过滤器的使用教程
2017/06/08 Javascript
vue + element-ui实现简洁的导入导出功能
2017/12/22 Javascript
webpack4简单入门实例
2018/09/06 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
2018/09/20 Javascript
ES6 Iterator接口和for...of循环用法分析
2019/07/31 Javascript
解决vue v-for src 图片路径问题 404
2019/11/12 Javascript
详解Python中for循环的使用
2015/04/14 Python
python生成式的send()方法(详解)
2017/05/08 Python
python中requests爬去网页内容出现乱码问题解决方法介绍
2017/10/25 Python
Python中pip更新和三方插件安装说明
2018/07/08 Python
python处理大日志文件
2019/07/23 Python
pandas 数据类型转换的实现
2020/12/29 Python
HTML5仿手机微信聊天界面
2016/03/18 HTML / CSS
亚马逊印度站:Amazon.in
2017/10/15 全球购物
利群广告词
2014/03/20 职场文书
土建技术员岗位职责
2015/04/11 职场文书
2015年教师学期工作总结
2015/04/30 职场文书
2016高一新生军训心得体会
2016/01/11 职场文书
经典励志格言:每日一句,让你每天充满能量
2019/08/16 职场文书
小学生六年级作文之关于感恩
2019/08/16 职场文书
竞聘开场白方式有哪些?
2019/08/28 职场文书
python之json文件转xml文件案例讲解
2021/08/07 Python
室外天线与收音机天线杆接合方法
2022/04/05 无线电
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
2022/12/24 HTML / CSS