D3 BarChart

char

基本绘制

柱形图基本绘制方法,注意enter的使用,免去了事先写好rect元素的麻烦

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

//设置画布
var width = 400
var height = 400
var svg = d3.select('body')
.append('svg')
.attr('width',width)
.attr('height',height)
//设置柱形图数据集
var dataset = [50,43,120,87,99,167,142]//柱形图数据集
//设置柱形图元素
var rectStep = 35
var rectWidth =30

var rect = svg.selectAll("rect")
.data(dataset)
.enter()//选中只有数据没有元素的部分
.append('rect')//由于没有元素所以要添加元素
.attr('fill','steelblue')//设置颜色
.attr('x',(d,i)=>i*(rectWidth + 3))//设置横坐标,+3是设置柱形图之间的间隙
.attr('y',(d)=>height-d)//反转
.attr('width',rectWidth)
.attr('height',(d)=>d)

数据更新

分别对update,enter和exit三个部分做处理

update如果不做处理,则不会有新的排序,因为配对的没有改变,还是之前画好的
enter不做改变,则不会增加,因为只增加了数据,没有对应的元素

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

<script>
//设置画布
var width = 400
var height = 400
var svg = d3.select('body')
.append('svg')
.attr('width',width)
.attr('height',height)
//设置柱形图数据集
var dataset = [50,43,120,87,99,167,142]//柱形图数据集
//设置柱形图元素
var rectStep = 35
var rectWidth =30
var rect = svg.selectAll("rect")
.data(dataset)
.enter()//选中只有数据没有元素的部分
.append('rect')//由于没有元素所以要添加元素
.attr('fill','steelblue')//设置颜色
.attr('x',(d,i)=>i*(rectWidth + 3))//设置横坐标,+3是设置柱形图之间的间隙
.attr('y',(d)=>height-d)//反转
.attr('width',rectWidth)
.attr('height',(d)=>d)

</script>
<button type='button' onclick="mysort()">排序</button>
<button type='button' onclick="myadd()">增加</button>
<script>
function draw(){
var update = svg.selectAll('rect').data(dataset)
var enter = update.enter()
var exit = update.exit()

update.attr('fill','steelblue')//设置颜色
.attr('x',(d,i)=>i*(rectWidth + 3))//设置横坐标,+3是设置柱形图之间的间隙
.attr('y',(d)=>height-d)//反转
.attr('width',rectWidth)
.attr('height',(d)=>d)
enter.append('rect')
.attr('fill','steelblue')//设置颜色
.attr('x',(d,i)=>i*(rectWidth + 3))//设置横坐标,+3是设置柱形图之间的间隙
.attr('y',(d)=>height-d)//反转
.attr('width',rectWidth)
.attr('height',(d)=>d)
exit.remove()
}

function mysort(){
dataset.sort(d3.ascending)
draw()
}
function myadd(){
dataset.push(Math.floor(Math.random()*100))
draw()
}