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

最新推荐文章于 2018-04-23 09:45:16 发布

数星星等天明

最新推荐文章于 2018-04-23 09:45:16 发布

阅读量1w

点赞数 7

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

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

版权

D3.js的v5版本入门教程专栏收录该内容

16 篇文章 113 订阅

订阅专栏

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.select("body").append("br");
    	document.write("scaleLinear(3.3)输出："+scaleLinear(3.3));
    </script>
  </body>

运行结果：

代码说明：

-var scaleLinear = d3.scaleLinear()
.domain([min,max])

.range([0,300]);也就是[0.9,3.3]映射[0,300]

-scaleLinear(3.3)，由映射关系可以知道，这里的输出为300，实际上的输出也是这样

序数比例尺

domain域和range域是离散的，也就是数组

<body>
    <script>
    	var index = [0,1,2,3,4];
    	var color = ["red","blue","yellow","black","green"];
    	var scaleOrdinal = d3.scaleOrdinal()
    		.domain(index)
    		.range(color);
    	document.write("scaleOrdinal(1)输出："+scaleOrdinal(1));
    	d3.select("body").append("br");//换行
    	document.write("scaleOrdinal(2)输出："+scaleOrdinal(2));
    	d3.select("body").append("br");
    	document.write("scaleOrdinal(4)输出："+scaleOrdinal(4));
    </script>
  </body>

运行结果：

代码说明：

-var scaleOrdinal = d3.scaleOrdinal()
.domain(index)

.range(color);建立一个序数比例尺

使用比例尺来建立上一章的柱状图

<body>
    <svg width="960" height="600"></svg>
    <script>
    	var marge = {top:60,bottom:60,left:60,right:60}
    	var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];  
    	
    	//定义一个线性比例尺
    	var scaleLinear = d3.scaleLinear()
    		.domain([0,d3.max(dataset)])
    		.range([0,300]);
    	
    	var svg = d3.select("svg");
    	var g = svg.append("g")
    		.attr("transform","translate("+marge.top+","+marge.left+")");
    	
    	var rectHeight = 30;
    	
    	g.selectAll("rect")
    		.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");
    </script>
  </body>

运行结果：

代码说明：

-.attr("width",function(d){
return scaleLinear(d);//设置宽,并在这里使用比例尺

})可以发现，我们在这里使用比例尺

效果浏览：点击浏览效果

源码浏览：点击源码浏览

（翻外篇）d3.js在网页端可视化neo4j图数据库

为了让大家更好的学习d3.js，“d3.js在网页端可视化neo4j图数据库”这是一个比较综合的项目——利用neo4j的java驱动API从neo4j中取数据，并利用d3.js在网页端进行可视化。大家在学完基础课程后可以做一下这个项目，进行巩固。点击下面链接进行查看：d3.js可视化neo4j图数据库项目专栏

数星星等天明

关注

7
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
D3.js的v5版本入门教程（第七章）—— 比例尺的使用

D3.js的v5版本入门教程（第七章）比例尺在D3.js中是一个很重要的东西，我们可以这样理解d3.js中的比例尺——一种映射关系，从domain映射到range域（为什么会是domain和range呢？等一下你就会看到，因为我们在建立比例尺是常常会用到domain()和range()两个函数，当然不是绝对的，D3中有很多类型的比例尺）下面介绍在本套教程中常用的两种比例尺...
复制链接

扫一扫

专栏目录