D3画图学习一
一、D3画图简介
D3 是最流行的可视化库之一，它被很多其他的表格插件所使用。它允许绑定任意数据到DOM，然后将数据驱动转换应用到Document中。你可以使用它用一个数组创建基本的HTML表格，或是利用它的流体过度和交互，用相似的数据创建惊人的SVG条形图。原谅我上面这句是从网上抄的，语文不太好。反正说白了，D3就是一个用来在web界面画图的库。有了它我们画各种图形和坐标轴都更加方便了。
二、使用的基本函数
1. 元素选择函数
在D3中对HTML元素选取主要用到select和selectAll两个函数。select用于选取单个元素，selectAll用于选取页面中所有的该元素。
函数原型：d3.select()
函数参数：HTML元素
函数返回值：选择的HTML元素对象。
示例： var p = d3.select("p"); //选择页面中的第一个<p>元素
函数原型：d3.selectAll()
函数参数：HTML元素
函数返回值：选择的HTML元素对象。
示例： var p = d3.selectAll("p"); //选择页面中所有的<p>元素
使用方式列举：
（1）选取单个元素
<body>
<p></p>
<body> d3.select("p">
.text("测试"); //输出：测试
（2）选取所有元素
<body>
<p></p>
<p></p>
</body> d3.selectAll("p")
.text(function(v,i){
return "测试" + i;
})
//输出: 测试0
// 测试1
（3）根据id选取元素
<body>
<p></p>
<p id="ceshi"></p>
</body> d3.select("#ceshi")
.text("ID选取"); //输出：ID选取
（4）根据class选取元素
<body>
<p></p>
<p class="ceshi"></p>
</body> d3.select(".ceshi")
.text("class测试")；
2. 数据绑定函数
（1）datum函数
函数原型：datum()
函数功能：绑定单个数据到选择集
示例：
<body>
<p></p>
<p></p>
</body> var str = "ceshi"
d3.selsetAll("body")
.datum(str)
.text (function(v,i){
return "第" + i + "个元素是" + v;
})
//输出：
//第0个元素是ceshi
//第1个元素是ceshi
（2）data函数
函数原型：data()
函数功能：将一个数组绑定到选择集
示例：
<body>
<p></p>
<p></p>
</body> var str = ["ceshi", "data"]
d3.selsetAll("body")
.datum(str)
.text (function(v,i){
return "第" + i + "个元素是" + v;
})
//输出：
//第0个元素是ceshi
//第1个元素是data
3. 元素添加函数
函数原型：append()
函数功能：在选择集后面添加元素
示例：
<body>
<p>段落1</p>
</body> d3.select(p)
.append("p")
.text("段落2");
//显示：
//段落1
//段落2
函数原型：insert()
函数功能：在选择集前面添加元素
示例：
<body>
<p>段落1</p>
</body> d3.select(p)
.insert("p")
.text("段落2");
//显示：
//段落2
//段落1
4. 元素移除函数
函数原型：remove()
函数功能：移除元素
示例：
<body>
<p>段落1</p>
<p>段落2</p>
</body> d3.select(p)
.remove();
//显示：
//段落2
这章就先介绍到这里，下一章将会将一些基本图形的画法。有点累了，下班回家。
D3画图学习一的更多相关文章
- D3.js学习（一）
从今天开始我将和大家一起学习D3.js(Data-Driven Documents),由于国内关于D3的学习资料少之又少,所以我觉得很有必要把自己学习过程记录下来,供同学们参考,如果文章有有哪些表达有 ...
- 数据可视化的优秀入门书籍有哪些,D3.js 学习资源汇总
习·D3.js 学习资源汇总 除了D3.js自身以外,许多可视化工具包都是基于D3开发的,所以对D3的学习就显得很重要了,当然如果已经有了Javascript的经验,学起来也会不费力些. Github ...
- D3.js学习（六）
上节我们学习了如何绘制多条曲线, 以及给不同的曲线指定不同的坐标系.在这节当中,我们会对坐标轴标签相关的处理进行学习.首先,我们来想一个问题, 如何我们的x轴上的各个标签的距离比较近,但是标签名又比较 ...
- D3.js学习（五）
上一节我们已经学习了如何设置填充区域,其实理解了他的实现原理还是非常简单了.这一节中, 我们主要学习多条曲线的绘制,以及给不同的曲线指定不同的纵坐标. 新的数据 由于我们要画两条曲线,所以我们要在原来 ...
- D3.js学习（四）
上一节我们已经学习了线条样式和格栅的绘制,在这一节中我们将要根据之前绘制的线条对图表进行填充,首先来看一下我们的目标吧 在这个图表中,我们对位于线条下面的空间进行了填充,那么,如何改做到呢? 设置填充 ...
- D3.js学习（三）
上一节中,我们已经画出了图表,并且给图表添加了坐标轴的标签和标题,在这一节中,我们将要学习几个绘制线条不同特性的几个函数,以及给图表添加格栅.ok,进入话题! 如何给线条设置绘制的样式? 这个其实非常 ...
- 精通D3.js学习笔记（1）基础的函数
买了本吕大师的d3可视化.最近来学习一下,做个笔记. 1.选择元素 select(第一元素) 和selectAll(全部的元素) 类似css的选择器.也可以是dom选中的. var i ...
- 【持续更新】D3 的学习资料
经常有朋友问哪里有关于 D3 的比较好的学习资料,现整理成此文.以后找到更多更好的,会不断更新本文. 我是在2013年开始接触 D3 的,当时就觉得这个工具很好玩.至今,学习资料整理了不少.如果有朋友 ...
- D3.js学习记录【转】【新】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- phpstudy apache 刚启动便停止
1.添加站点 2.重启服务 3.遇见问题 apache 刚启动,1秒钟中后就停止 4.解决问题 发现是自己添加的网站中包含中文路径的问题,建议不要在自己的网站目录下包含中文.
- centos账户的uid和gid
修改/etc/passwd和/etc/group文件的UID和GID为0,可以获得root权限,不过不推荐~ UID和GID Linux系统如何区别不同的用户呢?可以很自然地想到,使用不同的用户名应该 ...
- MySQL学习-常用命令整理
Eyes are more eloquent than lips. “眉目传情胜于甜言蜜语” 整理了一下自己遇到并且经常用到的MySQL命令,虽然官方文档上有很详细的解释,不过自己还是在这里记录一下, ...
- 【转载】Think as Customer 以客户为中心的测试理念
纵观各大公司的核心理念,往往都有一条类似“以客户为中心”的价值观.华为公司更是把“以客户为中心”放在其核心价值观的第一条,以显示它的重要性.从我 们入职培训开始,公司就反复强调并引导大家深入讨论,希望 ...
- apache 修改端口号 修改根目录 建立多个网站
修改apache端口号选择Apache下的httpd.conf,查找:Listen,你会看到 #Listen 12.34.56.78:80Listen 80把80改成90,保存就好了 修改WampSe ...
- JQuery学习笔记--01
JQuery使用的话,必做的一下件事就是下载JQuery库,才可以使用下载地址:http://jquery.com/ 下面就是引用JQuery库了: <script type="tex ...
- My97DatePicker 与 某个CSS冲突 ，导致无法显示
调试 Metronic3.7 模版 ,boostrap的时间插件不怎么好用,改用My97DatePicker, 发现某个与plugins.css中某个插件冲突,经排查发现 css 中有这一段 ifr ...
- 将 Objective-C 代码迁移到 Swift（Swift 2.0更新）-b
本节内容包括: 为你的Objective-c代码做好迁移准备 (Preparing Your Objective-C Code for Migration) 迁移过程(The Migration Pr ...
- cf C. Hamburgers
http://codeforces.com/contest/371/problem/C 二分枚举最大汉堡包数量就可以. #include <cstdio> #include <cst ...
- Android AsynTask更新主界面
虽然今天礼拜六还在加班,但是在等接口,所以还是有很多时间来自己学点东西的,所以就接着昨天的来.今天继续学的是不通过主线程来更新主线程的界面的问题. 昨天是用的开启线程调用Handler来更新线程,那个 ...