一、元素操作:

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系列——元素操作和简单画布操作的更多相关文章

  1. D3.js系列——初步使用、选择元素与绑定数据

    D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档.听名字有点抽象,说简单一点,其实就是一个 JavaScript 的函数库,使用它主要是用来做数据可 ...

  2. D3.js系列——交互式操作和布局

    一.图表交互操作 与图表的交互,指在图形元素上设置一个或多个监听器,当事件发生时,做出相应的反应. 交互,指的是用户输入了某种指令,程序接受到指令之后必须做出某种响应.对可视化图表来说,交互能使图表更 ...

  3. 文章预告的自我挖坑系列——D3.js 系列之星光闪烁

    D3.js 是个神奇的工具,下面收集了一些与星星相关的可视化的例子,静待慢慢的把坑填上 雷达图http://bl.ocks.org/kevinschaul/8213691      星空 二维(一)h ...

  4. D3.js系列——比例尺和坐标轴

    比例尺是 D3 中很重要的一个概念.绘制图形时直接用数值的大小来代表像素不是一种好方法,本章正是要解决此问题. 一.为什么需要比例尺 上一章制作了一个柱形图,当时有一个数组,绘图时,直接使用 250 ...

  5. D3.js 选择元素和绑定数据/使用数据

    选择元素和绑定数据是 D3 最基础的内容,本文将对其进行一个简单的介绍. 一.如何选择元素 在 D3 中,用于选择元素的函数有两个: d3.select():是选择所有指定元素的第一个 d3.sele ...

  6. D3.js系列——布局:打包图和地图

    一.打包图 打包图( Pack ),用于表示包含与被包含的关系,也可表示各对象的权重,通常用一圆套一圆来表示前者,用圆的大小来表示后者. 1.布局(数据转换) var pack = d3.layout ...

  7. D3.js系列——布局:弦图和集群图/树状图

    一.弦图 1.弦图是什么 弦图(Chord),主要用于表示两个节点之间的联系的图表.两点之间的连线,表示谁和谁具有联系. 2.数据 初始数据为: var city_name = [ "北京& ...

  8. D3.js系列——布局:饼状图和力导向图

    一.饼状图 在布局的应用中,最简单的就是饼状图. 1.数据 有如下数据,需要可视化: , , , , ]; 这样的值是不能直接绘图的.例如绘制饼状图的一个部分,需要知道一段弧的起始角度和终止角度,这些 ...

  9. D3.js系列——动态效果和Update、Enter、Exit的理解

    一.动态效果 D3 支持制作动态的图表.有时候,图表的变化需要缓慢的发生,以便于让用户看清楚变化的过程,也能给用户不小的友好感. 1.什么是动态效果 前面制作的图表是一蹴而就地出现,然后绘制完成后不再 ...

随机推荐

  1. sql文格式替换

    SELECT COUNT(1)FROM TAB1 TWHERE T.IS_DEL <> 0 将以上SQL格式替换为代码中的格式 sql.AppendLine(" SELECT & ...

  2. express 4.x+ swig

    Express 是一个基于 Node.js 平台的极简.灵活的 web 应用开发框架,它提供一系列强大的特性,帮助你创建各种 Web 和移动设备应用. express官网:http://www.exp ...

  3. hihocoder-第六十一周 Combination Lock

    题目1 : Combination Lock 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 Finally, you come to the interview roo ...

  4. hdu 1227(动态规划)

    Fast Food Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total S ...

  5. request.getServletContext()的问题!

    ServletRequest的getServletContext方法是Servlet3.0添加的,这个可以看一下官方文档 http://docs.oracle.com/javaee/6/api/jav ...

  6. a标签实现不跳转点击

    <a class="tiao" href="./index.php"></a> JS实现无跳转a标签 <script type=& ...

  7. linux下redis的最佳实践(Master-Slave)

    本文演示了redis在同一台linux上的安装及运行多个实例,并演示了主从复制,以及如何进行主从的切换. 1. 下载 $ wget http://download.redis.io/releases/ ...

  8. 在web项目下注册MySQL数据库驱动失败

    java.lang.ClassNotFoundException: com.mysql.jdbc.Driver at org.apache.catalina.loader.WebappClassLoa ...

  9. 【LeetCode刷题】SQL-Combine Two Tables

    Table: Person +-------------+---------+ | Column Name | Type | +-------------+---------+ | PersonId ...

  10. hadoop学习二:hadoop基本架构与shell操作

    1.hadoop1.0与hadoop2.0的区别: