D3.js庫(kù)-7-添加坐標(biāo)軸
坐標(biāo)軸是可視化圖表中經(jīng)常出現(xiàn)的一種圖形妆偏，由一些刻度和線列段組成膨蛮。D3中是沒有現(xiàn)成的坐標(biāo)軸海洼，SVG中因而沒有現(xiàn)成的圖形元素拧揽，需要通過D3提供的其他組件來(lái)手動(dòng)添加。下圖是添加了坐標(biāo)軸之后的效果圖灶挟。
image
坐標(biāo)軸+刻度尺
坐標(biāo)軸構(gòu)成
在SVG畫布的預(yù)定義元素中琉朽，有6種基本的圖形：
矩形
圓形
橢圓
線段
折線
多邊形
還有一種特殊的元素就是：路徑path
幾乎畫布中的所有圖形都是由以上7種元素構(gòu)成的。上述元素中沒有坐標(biāo)軸稚铣，采用類似的定義方式：將axis看做是一個(gè)標(biāo)簽箱叁，x1、x2等看做是它的一個(gè)個(gè)屬性
<axis x1="" x2="">...</axis>
分組元素g
由于沒有上述的元素惕医，需要其他的元素來(lái)組合構(gòu)成類似的形式：
<g>
<!--第一個(gè)刻度-->
<g>
<line></line> <!--第一個(gè)刻度的直線-->
<text></text> <!--第一個(gè)刻度的文字-->
</g>
<g>
<line></line> <!--第二個(gè)刻度的直線-->
<text></text> <!--第二個(gè)刻度的文字-->
</g>
...
<!--坐標(biāo)軸的軸線-->
<path></path>
</g>
分組元素是SVG畫布中的元素耕漱，意思就是group，是將其他元素進(jìn)行組合和分組存放抬伺。D3中提供了一個(gè)組件能夠自動(dòng)添加：d3.svg.axis()
每個(gè)分組g看做是一個(gè)刻度值和線段組成的group螟够。
定義一個(gè)坐標(biāo)軸
定義一個(gè)坐標(biāo)軸需要使用上一篇文章中使用的比例尺。它們二者經(jīng)常是一起使用的。
// 定義數(shù)據(jù)
const dateset = [80,160,20,100,300]
// 定義一個(gè)線性比例尺
const scaleLinear = d3.scaleLinear()
.domain([0, d3.max(dataset)]) // 映射區(qū)間
.range([0,250]);
const axis = d3.axisBottom(scaleLinear) // 定義向下的坐標(biāo)軸
.ticks(7); // 坐標(biāo)軸上的刻度數(shù)
g.append("g") // 追加足夠多的g元素
.attr("transform","translate(" + 30 + (dataset.length * rectHeight) + ")") // 設(shè)置位置信息
.call(axis) // 定義的比例尺本身就是函數(shù)妓笙，需要進(jìn)行回調(diào)
柱狀圖加上坐標(biāo)軸
下面是完整的代碼
<!DOCTYPE html>
<html>
<head>
<title>添加坐標(biāo)軸</title>
<meta charset="utf-8">
<script type="text/javascript" src="http://d3js.org/d3.v5.min.js">
</script>
</head>
<body>
<svg width="960" height="600"></svg>
<script>
// 定義畫布的邊框和給定數(shù)據(jù)
var marge = {top:60, bottom:60, left:60, right:60};
var dataset = [80, 160, 20, 100, 300];
// 定義一個(gè)線性比例尺
var scaleLinear = d3.scaleLinear()
.domain([0,d3.max(dataset)])
.range([0,300]);
// 定義每個(gè)分組元素
var svg = d3.select("svg");
var g = svg.append("g")
.attr("transform", "translate(" + marge.top + "," + marge.left + ")");
// 定義每個(gè)矩形的像素
var rectHeight = 25;
// 每個(gè)g元素的屬性進(jìn)行設(shè)置
g.selectAll("rect") // 選擇所有的矩形元素并綁定數(shù)據(jù)
.data(dataset)
.enter()
.append("rect") // 追加元素
.attr("x", 20)
.attr("y", function(d, i){
return i * rectHeight;
})
.attr("width",function(d){
return scaleLinear(d);
})
.attr("height", rectHeight - 5)
.attr("fill", "blue");
// 為坐標(biāo)軸定義一個(gè)線性比例尺
var xScale = d3.scaleLinear()
.domain([0,d3.max(dataset)]) // 定義范圍
.range([0, 300]);
// 定義一個(gè)坐標(biāo)軸
var xAxis = d3.axisBottom(xScale) // 向下的坐標(biāo)軸
.ticks(7); // 刻度數(shù)為7
g.append("g")
.attr("transform","translate(" + 20 + "," +(dataset.length * rectHeight) + ")") // 設(shè)置位置信息
.call(xAxis); // 將定義的坐標(biāo)軸進(jìn)行回調(diào)
</script>
</body>
</html>
