D3.js 学习随便，记录几种常用的坐标轴。
-
D3.js 比例尺，把一组输入域映射到输出域的函数，我们可以用比例尺来创建坐标轴。
.domain()
:设置输入域，
.range()
设置输出域；下面以基础的线性比例尺为例解释说明一下。
d3.scaleLinear 线性比例尺
<!DOCTYPE html>
<meta charset="UTF-8">
<title></title>
</head>
<div id="test-svg">
</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);
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);
* .tickFormat 设置刻度格式化器
var xAxis4 = d3.axisBottom().scale(xScale4).tickValues(timeTicks).tickFormat(format).tickSizeOuter(0);
svg.append('g')
.attr('transform', 'translate(0,300)')
.call(xAxis4);
.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)');
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);
文章目录预备知识关于 canvas 画布的原点画直线项目结构HTMLCSSJavaScript效果设置 canvas 起点偏移（**平移变换**）JavaScript效果画空心三角形JavaScript效果画实心三角形JavaScript效果画直角坐标系JavaScript效果参考
关于 canvas 画布的原点
在我们开始画图之前，我们需要了解一下画布栅格（canvas grid）以及坐标空间。canvas 的栅格的起点为左上角（坐标为 (0, 0)）。
index
画
坐标轴
//使用d3的svg的axis()方法生成
坐标轴
var x_axis = d3.svg.axis().scale(scale_x),y_axis = d3.svg.axis().scale(scale_y)g.append("g").call(x_axis)页面效果如下：这个时候x轴在页面的上方，不在我们想要的位置，可以通过设置transform属性将
坐标轴
移到自己想要的位置画y轴g.ap...
本着学习d3
js
的原则，对函数用法做出解释，对源码写出自己的理解，文章最后补充一些源码中用到的
JS
语法，欢迎各位批评指正，学习交流！多多评论共同进步！
d3.min(iterable[,accessor])
根据顺序返回可迭代对象中的最小值，如果没有可以比较的值，返回undefined. 可选访问函数等价于调用Array.from(Array.from用法，将类似于数组的对象转化为数组，要求该...
