Fork me on GitHub

D3.js库-8-完整的柱状图

制作一个完整的柱状图

一个完整的柱状图应该是包含坐标轴、文字、矩形和标题等。在本篇文章中将从数据定义、定义画布和边框、坐标轴和比例尺的定义、矩形元素的属性设置、字体的大小等各个方面进行讲解。

定义数据集

首先,定义我们将要用于描绘的数据集合。每个数据由name和value组成

定义画布SVG

画布的定义需要从svg元素中提取出来d3.select("#mainsvg")

然后再定义其宽和高,注意两种定义的方法:一种是利用+号将字符串转成数值型,一种是直接赋值

定义margin

定义margin的时候需要指定4个属性:top、bottom、left、right。

定义两种比例尺

横轴是线性比例尺;纵轴是离散型的比例尺。注意两种比例尺的映射范围

定义分组元素g

定义两个坐标轴

坐标轴定义的时候需要将比例尺传进来。一个是向左,一个向下

设置矩形元素的属性

改变字体和设置标题

源码

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html>
<head>
<title>BarChart</title>
<script type="text/javascript" src="http://d3js.org/d3.v5.min.js">
</script>


</head>

<body>
<svg width="1600" height="800" id="mainsvg" class="svgs"></svg>
<script>
// 1. 定义数据
const data = [{name:"zhangsan",value:6}
,{name:"lisi",value:17}
,{name:"haozheng",value:27}
,{name:"pidada",value:34}
,{name:"zhouzheng",value:10}
,{name:"peter",value:22}
]

// 2. 定义svg及其宽高
const svg = d3.select("#mainsvg"); // 取出svg的id号
const width = +svg.attr("width"); // + 表示将字符串转成数值
const height = 800; // 比较两种定义方法

// 3. 定义margin:4个属性
// SVG指的是整个作画的空间,定义了margin之后,将作画空间控制在svg-margin之内
const margin = {top:60, right:30, left:100, bottom:60};
const innerWidth = width - margin.left - margin.right; // 整个画布减去margin的左右两边
const innerHeight = height - margin.top - margin.bottom; // 整个画布的高减去mrgin的上下

// 4. 定义两种比例尺:线性和离散型
const xScale = d3.scaleLinear()
.domain([0,d3.max(data, d => d.value)]) // x轴上的取值是value
.range([0,innerWidth]);

const yScale = d3.scaleBand()
.domain(data.map(d => d.name)) // y轴上的取值是名字name
.range([0,innerHeight])
.padding(0.1); // 指定每个矩形的间隔

// 5. 定义分组元素g
const g = svg.append("g")
.attr("id","maingroup")
.attr("transform",`translate(${margin.left},${margin.top})`);

// 6. 定义两个坐标轴,并且利用元素g进行回调
const yAxis = d3.axisLeft(yScale)
.tickSize(-innerWidth);
g.append("g").call(yAxis); // 通过分组元素g进行回调

const xAxis = d3.axisBottom(xScale);
g.append("g").call(xAxis).attr("transform",`translate(0,${innerHeight})`);

// 7. 每个矩形元素进行属性设置
data.forEach(d => {
g.append("rect")
.attr("width",xScale(d.value))
.attr("height",yScale.bandwidth())
.attr("fill","green")
.attr("opacity",0.8) // 透明度
.attr("y",yScale(d.name));
})

// 8. 改变y轴上的字体大小
d3.selectAll(".tick text").attr("font-size","1.5em");

// 9. 标题设置
g.append("text").text("bar-Chart")
.attr("font-size","1.5em")
.attr("transform",`translate(${innerWidth / 2}, 0)`) // 字体最左边居中
.attr("text-anchor","middle"); // 字体居中
</script>
</body>
</html>

效果图

image-20200522005415359

本文标题:D3.js库-8-完整的柱状图

发布时间:2020年05月22日 - 00:05

原始链接:http://www.renpeter.cn/2020/05/22/D3-js%E5%BA%93-8-%E5%AE%8C%E6%95%B4%E7%9A%84%E6%9F%B1%E7%8A%B6%E5%9B%BE.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

Coffee or Tea