D3.js的v5版本入门教程（第七章）—— 比例尺的使用

数星星等天明

于 2018-04-22 21:40:27 发布

阅读量1w

点赞数 7

分类专栏： D3.js的v5版本入门教程文章标签： d3.js v5 v4 比例尺

本文链接：https://blog.csdn.net/qq_34414916/article/details/80029808

版权

D3.js的v5版本入门教程（第七章）

比例尺在D3.js中是一个很重要的东西，我们可以这样理解d3.js中的比例尺——一种映射关系，从domain映射到range域（为什么会是domain和range呢？等一下你就会看到，因为我们在建立比例尺是常常会用到domain()和range()两个函数，当然不是绝对的，D3中有很多类型的比例尺）

下面介绍在本套教程中常用的两种比例尺

线性比例尺
序数比例尺

线性比例尺

domain域和range域都可以连续变化

<body>
    <script>
    	var dataset = [1.2, 2.3, 0.9, 1.5, 3.3];
    	var min = d3.min(dataset);//得到最小值
    	var max = d3.max(dataset);//得到最大值
    	var scaleLinear = d3.scaleLinear()
    		.domain([min,max])
    		.range([0,300]);
    	document.write("scaleLinear(1)输出："+scaleLinear(1));
    	d3.select("body").append("br");//换行
    	document.write("scaleLinear(2)输出："+scaleLinear(2));
    	d3.s