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 = 300;  //画布的宽度
var height = 300;   //画布的高度
 
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 = 300;  //画布的宽度
    var height = 300;   //画布的高度
 
    var svg = d3.select("body")     //选择文档中的body元素
        .append("svg")          //添加一个svg元素
        .attr("width", width)       //设定宽度
        .attr("height", height);    //设定高度

    var dataset = [ 250 , 210 , 170 , 130 , 90 ];  //数据（表示矩形的宽度）
    var rectHeight = 25;   //每个矩形所占的像素高度(包括空白)
 svg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("x",20) .attr("y",function(d,i){ return i * rectHeight; }) .attr("width",function(d){ return d; }) .attr("height",rectHeight-2) .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 的形式，方便归类和修改。

秒客网