D3.js 學習隨便，記錄幾種常用的坐標軸。
- D3.js 比例尺，把一組輸入域映射到輸出域的函數，我們可以用比例尺來創建坐標軸。
.domain():設置輸入域，.range()設置輸出域；下面以基礎的線性比例尺為例解釋說明一下。
d3.scaleLinear 線性比例尺
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="test-svg">
</div>
</body>
<script src="https://d3js.org/d3.v5.js"></script>
<script>
window.onload = function() {
var width = 830,
height = 800;
// 初始化svg
var svg = d3.select("#test-svg")
.append('svg')
.attr('width', width + 'px')
.attr('height', height + 'px');
/*
* scaleLinear().domain([numbers]):輸入域；[numbers]為數組，必須包含兩個或以上的數字，且必須為數字
* scaleLinear().range([values]):輸出域；[values]同樣為數組
*/
var xScale1 = d3.scaleLinear()
.domain([-5, 5])
.range([20, width - 10]);
var xAxis1 = d3.axisBottom().scale(xScale1);
svg.append('g')
.call(xAxis1);
}
</script>
</html>
- 輸入到輸出的映射
- 顯示效果
d3.scaleTime 線性時間比例尺
var xScale2 = d3.scaleTime()
.domain([new Date(2019, 1), new Date(2019, 6)])
.range([20, width - 40]);
var xAxis2 = d3.axisBottom().scale(xScale2);
svg.append('g')
.attr('transform', 'translate(0,100)')
.call(xAxis2);
d3.scaleOrdinal 序列比例尺
var xdata = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
var xScale3 = d3.scaleOrdinal()
.domain(xdata)
.range([100, 200, 300, 400, 500, 600, 700]);
var xAxis3 = d3.axisBottom().scale(xScale3);
svg.append('g')
.attr('transform', 'translate(0,200)')
.call(xAxis3);
自定義時間格式
var _time = new Date().getTime();
var timeTicks = [];
for(var i = 0; i < 10; i++) {
timeTicks.push(_time += 2000);
}
var format = function(time) {
return d3.timeFormat("%H:%M:%S")(time * 1000);
};
// d3.extent 取最大最小值，此處起始和終止時間
var xScale4 = d3.scaleLinear()
.domain(d3.extent(timeTicks))
.range([20, width - 40]);
/*
* .tickValues 指定刻度值
* .tickFormat 設置刻度格式化器
*/
var xAxis4 = d3.axisBottom().scale(xScale4).tickValues(timeTicks).tickFormat(format).tickSizeOuter(0);
svg.append('g')
.attr('transform', 'translate(0,300)')
.call(xAxis4);
坐標Y軸
var yScale6 = d3.scaleLinear()
.domain([-5, 5])
.range([20, width - 10]);
var yAxis6 = d3.axisLeft().scale(yScale6);
svg.append('g')
.call(yAxis6)
.attr('trasform','translate(60,0)');
由於負數在上邊所以我們需要顛倒一下range改為.range([ width - 10,20]);
坐標軸文字重疊
1）當坐標軸文字過多顯示重疊時，可以傾斜坐標軸文字
var _time = new Date().getTime();
var timeTicks = [];
for(var i = 0; i < 20; i++) {
timeTicks.push(_time += 2000);
}
var format = function(time) {
return d3.timeFormat("%H:%M:%S")(time * 1000);
};
var xScale5 = d3.scaleLinear()
.domain(d3.extent(timeTicks))
.range([40, width - 40]);
var xAxis5 = d3.axisBottom().scale(xScale5).tickValues(timeTicks).tickFormat(format).tickSizeOuter(0);
svg.append('g')
.attr('transform', 'translate(0,400)')
.call(xAxis5)
.selectAll("text")
.attr("dy", ".75em")
.attr('transform', 'rotate(-14)');
2）也可以上下交錯排布
var _time = new Date().getTime();
var timeTicks = [];
for(var i = 0; i < 20; i++) {
timeTicks.push(_time += 2000);
}
var format = function(time) {
return d3.timeFormat("%H:%M:%S")(time * 1000);
};
var xScale5 = d3.scaleLinear()
.domain(d3.extent(timeTicks))
.range([40, width - 40]);
var trans = function(item,i){
if(i % 2 === 0){
return '.75em';
}else{
return '1.75em';
}
}
var xAxis5 = d3.axisBottom().scale(xScale5).tickValues(timeTicks).tickFormat(format).tickSizeOuter(0);
svg.append('g')
.attr('transform', 'translate(0,400)')
.call(xAxis5)
.selectAll("text")
.attr("dy", trans);
