制作一個(gè)完整的柱狀圖
一個(gè)完整的柱狀圖應(yīng)該是包含坐標(biāo)軸、文字、矩形和標(biāo)題等。在本篇文章中將從數(shù)據(jù)定義、定義畫(huà)布和邊框、坐標(biāo)軸和比例尺的定義、矩形元素的屬性設(shè)置、字體的大小等各個(gè)方面進(jìn)行講解。
image
定義數(shù)據(jù)集
首先，定義我們將要用于描繪的數(shù)據(jù)集合。每個(gè)數(shù)據(jù)由name和value組成
image
定義畫(huà)布SVG
畫(huà)布的定義需要從svg元素中提取出來(lái)d3.select("#mainsvg")
然后再定義其寬和高，注意兩種定義的方法：一種是利用+號(hào)將字符串轉(zhuǎn)成數(shù)值型，一種是直接賦值
image
定義margin
定義margin的時(shí)候需要指定4個(gè)屬性：top、bottom、left、right。
image
定義兩種比例尺
橫軸是線性比例尺；縱軸是離散型的比例尺。注意兩種比例尺的映射范圍
image
定義分組元素g
image
定義兩個(gè)坐標(biāo)軸
坐標(biāo)軸定義的時(shí)候需要將比例尺傳進(jìn)來(lái)。一個(gè)是向左，一個(gè)向下
image
設(shè)置矩形元素的屬性
image
改變字體和設(shè)置標(biāo)題
image
源碼
<!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. 定義數(shù)據(jù)
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號(hào)
const width = +svg.attr("width"); // + 表示將字符串轉(zhuǎn)成數(shù)值
const height = 800; // 比較兩種定義方法
// 3. 定義margin：4個(gè)屬性
// SVG指的是整個(gè)作畫(huà)的空間，定義了margin之后，將作畫(huà)空間控制在svg-margin之內(nèi)
const margin = {top:60, right:30, left:100, bottom:60};
const innerWidth = width - margin.left - margin.right; // 整個(gè)畫(huà)布減去margin的左右兩邊
const innerHeight = height - margin.top - margin.bottom; // 整個(gè)畫(huà)布的高減去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); // 指定每個(gè)矩形的間隔
// 5. 定義分組元素g
const g = svg.append("g")
.attr("id","maingroup")
.attr("transform",`translate(${margin.left},${margin.top})`);
// 6. 定義兩個(gè)坐標(biāo)軸，并且利用元素g進(jìn)行回調(diào)
const yAxis = d3.axisLeft(yScale)
.tickSize(-innerWidth);
g.append("g").call(yAxis); // 通過(guò)分組元素g進(jìn)行回調(diào)
const xAxis = d3.axisBottom(xScale);
g.append("g").call(xAxis).attr("transform",`translate(0,${innerHeight})`);
// 7. 每個(gè)矩形元素進(jìn)行屬性設(shè)置
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. 標(biāo)題設(shè)置
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
效果圖
image-20200522005415359
</pre>
