D3 js 笔记02

发表于 更新于 分类于 本文字数： 1.4k 阅读时长 ≈ 5 分钟

常用的操作:选择，插入，删除，前面已经讲了选择元素的相关操作，这里还是简单记一下。

元素操作

选择元素

假设有三个元素

1
2
3
<p>test1</p>
<p>test2</p>
<p>test3</p>

下面的操作都是基于这三个的元素的操作

选择第一个p元素

1
2
var p1 = body.sellect("p");
p1.style("color", "red");

全选

1
2
var p = body.sellectAll("p");
p.style("color", "red");

选择指定元素

  • 通过元素id属性
1
<p> id="id_2">Test 2</p>

然后使用下面的代码来改变第二个元素的颜色

1
2
var p2 = body.select("#id_2");
p2.style("color","red");
  • 通过元素class属性

假设有如下内容，把这个内容改一下:

1
2
3
<p class="c1" id="id_1">Apple</p>
<p class="c1" id="id_2">Pear</p>
<p class="c2" id="id_3">Banana</p>

可以使用下面的方法:

1
2
var p = body.selectAll(".c1");
p.style("color", "blue");

备注:关于select()和selectAll()的参数，其实是符合CSS选择器的条件的，即用#表示id，用.表示class.这样可以把前两个内容设置成蓝色。

插入

和Python很像，有insert()以及append()方法:

1
2
append():	# 在选择集末尾插入元素
insert():	# 在选择集前面插入元素

例子:

1
2
body.append("p").text("append p element");	# 在最后插入一个<p>元素，并且设置文本内容
body.insert("p", "#id_2").text("insert p element");	# 在id为id_2的元素前面插入一个元素

结果如下:

1
2
3
4
5
Apple
insert p element
Pear
Banana
append p element

删除

这个简单，直接使用remove()即可，对于上面的代码:

1
2
var p = body.select("#id_1");
p.remove();	# 删除id=id_1的元素

简单图表

简单介绍一下图表，但是的先明白几个常见的术语:
要画图，必须要在一个用来画图的东西，通常我们用画布来画图，常见的画布又两种:SVG和Canvas。

  • SVG

SVG是指可缩放的矢量图形，主要用来描述二维矢量图形，定义图形也很简单，使用xml来定义图形。由于是用xml来定义图形，所以每个元素都可以添加JavaScript事件处理器。

  • Canvas

Canvas是通过JavaScript来绘制2D图形

**注意:**这里需要说明一下，D3提供的很多画图的函数都是SVG图形生成器，所以建议在学习D3.js的时候使用SVG画布,添加一个SVG也很简单:

1
2
3
4
5
6
7
var width = 300;  //画布的宽度
var height = 300;   //画布的高度
 
var svg = d3.select("body")     //选择文档中的body元素
    .append("svg")          //添加一个svg元素
    .attr("width", width)       //设定宽度
    .attr("height", height);    //设定高度

下面就可以在这个svg上画各种图了,先上源码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<html>
<head>
    <meta charset="utf-8">
    <title>HelloWorld</title>
</head>
<body>
<script src="js/d3.min.js" charset="utf-8"></script>
<script>
    var width = 300;
    var height = 300;

    var svg = d3.select("body")
            .append("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)  // 设置举行左上角开始x位置
            .attr("y", function(d, i) {     // 设置举行左上角开始y位置
                return i * rectHeight;
            })
            .attr("width", function(d) {    // 设置每个举行的宽度(长度)
                return d;
            })
            .attr("height", rectHeight - 2) // 行之间空出一条间隙
            .attr("fill", "steelblue");
</script>
</body>
</html>

解释一下,<rect>为矩形，它有四个属性:

1
2
3
4
x：矩形左上角的 x 坐标
y：矩形左上角的 y 坐标
width：矩形的宽度
height：矩形的高度

其中x轴正方向为水平向右，y轴正方向为垂直向下:

1
var dataSet = [250, 210, 170, 130, 90];

用来存储几个长方形的长度，即width属性值，添加和dataSet数量相等的矩形，所使用的代码是:

1
2
3
4
svg.selectAll("rect")
        .data(dataSet)
        .enter()
        .append("rect")

这段代码先记住，可以添加足够多的元素，后面细讲机制，然后就是前面讲过的给元素附属性值了，依次给每个举行设置那四个属性的值，dataSet里面的元素设置成举行的width属性值，最后设置一下颜色，效果如下:
svg图表

比例尺

上面的设置矩形的长度用的是一个数组，里面的值直接设置成了矩形的像素长度，但是这样比较死，有可能太大也有可能太小，所以使用比例尺是个不错的注意，只要设置一种放缩关系，只用设定上下限，中间的值会自动放缩会很方便。
简单来说就是一个函数x->y这样的一种映射关系,x为定义域，y为值域。

线性比例尺

这种比例尺比较常用，也比较简单，使用上只用设定上下限即可:

1
2
3
4
5
6
7
8
9
10
11
var dataSet = [1.2, 2.3, 0.9, 1.5, 3.3];
var min = d3.min(dataSet);
var max = d3.max(dataSet);

var linear = d3.scale.linear()
	.domain([min, max])
	.range([0, 300])

linear(0.9)
linear(2.3)
linear(3.3)

d3.scale.linear()返回线性比例尺，也可以当函数使用。

离散比例尺

有时候需要的并不一定是线性连续的映射关系，可能是把某一批转化成另一类元素，例如:

1
2
var index = [0, 1, 2, 3, 4];
var color = ["red", "blue", "green", "yellow", "black"];

需要把对应的序号映射到颜色上去，用序数比例尺就更合适:

1
2
3
4
5
6
7
var ordinal = d3.scale.ordinal()
        .domain(index)
        .range(color);

ordinal(0); //返回 red
ordinal(2); //返回 green
ordinal(4); //返回 black

所以上面讲的柱形图，我们可以利用比例尺改写一下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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 linear(d);   //在这里用比例尺
    })
    .attr("height",rectHeight-2)
    .attr("fill","steelblue");