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 相关文章推荐
跟随鼠标旋转的文字
Nov 30 Javascript
JavaScript入门教程(2) JS基础知识
Jan 31 Javascript
jQuery 版本的文本输入框检查器Input Check
Jul 09 Javascript
JS中图片缓冲loading技术的实例代码
Aug 29 Javascript
For循环中分号隔开的3部分的执行顺序探讨
May 27 Javascript
jQuery实现HTML表格单元格的合并功能
Apr 06 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
Apr 29 Javascript
浅谈js数组和splice的用法
Dec 04 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
May 12 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
Nov 16 Javascript
vue中touch和click共存的解决方式
Jul 28 Javascript
如何在CocosCreator里画个炫酷的雷达图
Apr 16 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执行速度全攻略(下)
2006/10/09 PHP
php 小乘法表实现代码
2009/07/16 PHP
PHP加Nginx实现动态裁剪图片方案
2014/03/10 PHP
PHP随机生成唯一HASH值自定义函数
2015/04/20 PHP
PHP7.0连接DB操作实例分析【基于mysqli】
2019/09/26 PHP
thinkphp 5框架实现登陆,登出及session登陆状态检测功能示例
2019/10/10 PHP
js如何获取兄弟、父类等节点
2014/01/06 Javascript
通过隐藏iframe实现无刷新上传文件操作
2016/03/16 Javascript
jQuery基于json与cookie实现购物车的方法
2016/04/15 Javascript
微信小程序实战之上拉(分页加载)效果(2)
2017/04/17 Javascript
Vuex利用state保存新闻数据实例
2017/06/28 Javascript
webpack2.0配置postcss-loader的方法
2017/08/17 Javascript
bing Map 在vue项目中的使用详解
2018/04/09 Javascript
监控微信小程序中的慢HTTP请求过程详解
2019/07/05 Javascript
js实现鼠标拖拽div左右滑动
2020/01/15 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
利用node.js开发cli的完整步骤
2020/12/29 Javascript
Python描述器descriptor详解
2015/02/03 Python
Python对象与引用的介绍
2019/01/24 Python
Python实现FM算法解析
2019/06/18 Python
简单了解Django应用app及分布式路由
2019/07/24 Python
python3中eval函数用法使用简介
2019/08/02 Python
在 Jupyter 中重新导入特定的 Python 文件(场景分析)
2019/10/27 Python
详解pytorch中squeeze()和unsqueeze()函数介绍
2020/09/03 Python
HTML5基于flash实现播放RTMP协议视频的示例代码
2020/12/04 HTML / CSS
中国一家专注拼团的社交购物网站:拼多多
2018/06/13 全球购物
lookfantastic荷兰:在线购买奢华护肤、护发和化妆品
2018/11/27 全球购物
高中毕业自我鉴定
2013/12/13 职场文书
旅游管理毕业生自荐书
2014/02/02 职场文书
大学生入党推荐书范文
2014/05/17 职场文书
中学生民族团结演讲稿
2014/08/27 职场文书
高中生第一学年自我鉴定
2014/09/12 职场文书
2015年大学教师工作总结
2015/05/20 职场文书
手把手教你实现PyTorch的MNIST数据集
2021/06/28 Python
Apache Linkis 中间件架构及快速安装步骤
2022/03/16 Servers
游戏《我的世界》澄清Xbox版暂无计划加入光追
2022/04/03 其他游戏