D3.js系列——元素操作和简单画布操作
一、元素操作:
1、选择元素
select 和 selectAll,以及选择集的概念
var p = d3.select("body").select("p") // 使用 select ,参数传入 p 即可,如此返回的是第一个 p 元素
var p = d3.select("body").selectAll("p") // 使用 selectAll 选择 body 中所有的 p 元素
var p = d3.select("body").select("#myId") // 使用 select 选择id元素
var p = d3.select("body").selectAll(".myClass") // 要用 selectAll 选择class元素
关于 select 和 selectAll 的参数,其实是符合 CSS 选择器的条件的,即用“井号(#)”表示 id,用“点(.)”表示 class。
此外,对于已经绑定了数据的选择集,还有一种选择元素的方法,那就是灵活运用 function(d, i)。我们已经知道参数 i 是代表索引号的,于是便可以用条件判定语句来指定执行的元素。
2、插入元素
插入元素涉及的函数有两个:
append():在选择集末尾插入元素
insert():在选择集前面插入元素
var body = d3.select("body");
body.append("p")
.text("append p element");//在 body 的末尾添加一个 p 元素 body.insert("p","#myId")
.text("insert p element");//在 body 中 id 为 myid 的元素前添加一个 p 元素
3、删除元素
删除一个元素时,对于选择的元素,使用 remove 即可
var body = d3.select("body");
var p = body.select("#myid");
p.remove(); //删除指定 id 的段落元素
二、画布是什么
之前的处理对象都是 HTML 的文字,没有涉及图形的制作。要绘图,首要需要的是一块绘图的“画布”。
HTML 5 提供两种强有力的“画布”:SVG 和 Canvas。
1、SVG 是什么
SVG,指可缩放矢量图形(Scalable Vector Graphics),是用于描述二维矢量图形的一种图形格式,是由万维网联盟制定的开放标准。
SVG 使用 XML 格式来定义图形,除了 IE8 之前的版本外,绝大部分浏览器都支持 SVG,可将 SVG 文本直接嵌入 HTML 中显示。
SVG 有如下特点:
(1)SVG 绘制的是矢量图,因此对图像进行放大不会失真。
(2)基于 XML,可以为每个元素添加 JavaScript 事件处理器。
(3)每个图形均视为对象,更改对象的属性,图形也会改变。
(4)不适合游戏应用。
2、Canvas 是什么
Canvas 是通过 JavaScript 来绘制 2D 图形,是 HTML 5 中新增的元素。
Canvas 有如下特点:
(1)绘制的是位图,图像放大后会失真。
(2)不支持事件处理器。
(3)能够以 .png 或 .jpg 格式保存图像
(4)适合游戏应用
3、添加画布
D3 虽然没有明文规定一定要在 SVG 中绘图,但是 D3 提供了众多的 SVG 图形的生成器,它们都是只支持 SVG 的。因此,建议使用 SVG 画布。
使用 D3 在 body 元素中添加 svg 的代码如下:
var width = ; //画布的宽度
var height = ; //画布的高度 var svg = d3.select("body") //选择文档中的body元素
.append("svg") //添加一个svg元素
.attr("width", width) //设定宽度
.attr("height", height); //设定高度
有了画布,接下来就可以在画布上作图了。
4、绘制矩形
这里绘制一个横向的柱形图。只绘制矩形,不绘制文字和坐标轴。在 SVG 中,矩形的元素标签是 rect。例如:
<svg>
<rect></rect>
<rect></rect>
</svg>
上面的 rect 里没有矩形的属性。矩形的属性,常用的有四个:
x:矩形左上角的 x 坐标
y:矩形左上角的 y 坐标
width:矩形的宽度
height:矩形的高度
要注意,在 SVG 中,x 轴的正方向是水平向右,y 轴的正方向是垂直向下的。
<html>
<head>
<meta charset="utf-8">
<title>简单矩形</title>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var width = ; //画布的宽度
var height = ; //画布的高度 var svg = d3.select("body") //选择文档中的body元素
.append("svg") //添加一个svg元素
.attr("width", width) //设定宽度
.attr("height", height); //设定高度 var dataset = [ , , , , ]; //数据(表示矩形的宽度)
var rectHeight = ; //每个矩形所占的像素高度(包括空白) svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x",)
.attr("y",function(d,i){
return i * rectHeight;
})
.attr("width",function(d){
return d;
})
.attr("height",rectHeight-)
.attr("fill","steelblue");
</script>
</body>
</html>
这段代码添加了与 dataset 数组的长度相同数量的矩形,所使用的语句是:
svg.selectAll("rect") //选择svg内所有的矩形
.data(dataset) //绑定数组
.enter() //指定选择集的enter部分
.append("rect") //添加足够数量的矩形元素
这段代码以后会常常出现在 D3 的代码中,请务必牢记。当:有数据,而没有足够图形元素的时候,使用此方法可以添加足够的元素。
添加了元素之后,就需要分别给各元素的属性赋值。在这里用到了 function(d, i),前面已经讲过,d 代表与当前元素绑定的数据,i 代表索引号。给属性赋值的时候,是需要用到被绑定的数据,以及索引号的。
最后一行的:.attr("fill","steelblue"); 是给矩形元素设置颜色。一般来说,最好写成外置 CSS 的形式,方便归类和修改。
D3.js系列——元素操作和简单画布操作的更多相关文章
- D3.js系列——初步使用、选择元素与绑定数据
D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档.听名字有点抽象,说简单一点,其实就是一个 JavaScript 的函数库,使用它主要是用来做数据可 ...
- D3.js系列——交互式操作和布局
一.图表交互操作 与图表的交互,指在图形元素上设置一个或多个监听器,当事件发生时,做出相应的反应. 交互,指的是用户输入了某种指令,程序接受到指令之后必须做出某种响应.对可视化图表来说,交互能使图表更 ...
- 文章预告的自我挖坑系列——D3.js 系列之星光闪烁
D3.js 是个神奇的工具,下面收集了一些与星星相关的可视化的例子,静待慢慢的把坑填上 雷达图http://bl.ocks.org/kevinschaul/8213691 星空 二维(一)h ...
- D3.js系列——比例尺和坐标轴
比例尺是 D3 中很重要的一个概念.绘制图形时直接用数值的大小来代表像素不是一种好方法,本章正是要解决此问题. 一.为什么需要比例尺 上一章制作了一个柱形图,当时有一个数组,绘图时,直接使用 250 ...
- D3.js 选择元素和绑定数据/使用数据
选择元素和绑定数据是 D3 最基础的内容,本文将对其进行一个简单的介绍. 一.如何选择元素 在 D3 中,用于选择元素的函数有两个: d3.select():是选择所有指定元素的第一个 d3.sele ...
- D3.js系列——布局:打包图和地图
一.打包图 打包图( Pack ),用于表示包含与被包含的关系,也可表示各对象的权重,通常用一圆套一圆来表示前者,用圆的大小来表示后者. 1.布局(数据转换) var pack = d3.layout ...
- D3.js系列——布局:弦图和集群图/树状图
一.弦图 1.弦图是什么 弦图(Chord),主要用于表示两个节点之间的联系的图表.两点之间的连线,表示谁和谁具有联系. 2.数据 初始数据为: var city_name = [ "北京& ...
- D3.js系列——布局:饼状图和力导向图
一.饼状图 在布局的应用中,最简单的就是饼状图. 1.数据 有如下数据,需要可视化: , , , , ]; 这样的值是不能直接绘图的.例如绘制饼状图的一个部分,需要知道一段弧的起始角度和终止角度,这些 ...
- D3.js系列——动态效果和Update、Enter、Exit的理解
一.动态效果 D3 支持制作动态的图表.有时候,图表的变化需要缓慢的发生,以便于让用户看清楚变化的过程,也能给用户不小的友好感. 1.什么是动态效果 前面制作的图表是一蹴而就地出现,然后绘制完成后不再 ...
随机推荐
- sql文格式替换
SELECT COUNT(1)FROM TAB1 TWHERE T.IS_DEL <> 0 将以上SQL格式替换为代码中的格式 sql.AppendLine(" SELECT & ...
- express 4.x+ swig
Express 是一个基于 Node.js 平台的极简.灵活的 web 应用开发框架,它提供一系列强大的特性,帮助你创建各种 Web 和移动设备应用. express官网:http://www.exp ...
- hihocoder-第六十一周 Combination Lock
题目1 : Combination Lock 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 Finally, you come to the interview roo ...
- hdu 1227(动态规划)
Fast Food Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total S ...
- request.getServletContext()的问题!
ServletRequest的getServletContext方法是Servlet3.0添加的,这个可以看一下官方文档 http://docs.oracle.com/javaee/6/api/jav ...
- a标签实现不跳转点击
<a class="tiao" href="./index.php"></a> JS实现无跳转a标签 <script type=& ...
- linux下redis的最佳实践(Master-Slave)
本文演示了redis在同一台linux上的安装及运行多个实例,并演示了主从复制,以及如何进行主从的切换. 1. 下载 $ wget http://download.redis.io/releases/ ...
- 在web项目下注册MySQL数据库驱动失败
java.lang.ClassNotFoundException: com.mysql.jdbc.Driver at org.apache.catalina.loader.WebappClassLoa ...
- 【LeetCode刷题】SQL-Combine Two Tables
Table: Person +-------------+---------+ | Column Name | Type | +-------------+---------+ | PersonId ...
- hadoop学习二:hadoop基本架构与shell操作
1.hadoop1.0与hadoop2.0的区别: