【 D3.js 入门系列 --- 5 】 如何添加坐标轴

    本人的个人博客为: www.ourd3js.com 

    csdn博客为: blog.csdn.net/lzhlzz 

    转载请注明出处,谢谢。


     第3节中做了一个图标,但没有为它添加一个相应的坐标轴,这样不知道每一个柱形到底有多长。这一节做一个坐标轴。

    D3中的坐标轴都是以 svg 图的形式出现的,这也是为什么在第3节中要使用 svg 的方法做柱形图的原因。第4节里我们讲解了 scale (比例)的用法,在做坐标轴的时候也需要用到比例。第4节中,我们说到scale 是一个函数,这一节中的坐标轴也是一个函数,但是用法却有点不同,要注意。

    看下面的代码,我们分别定义数据,scale (比例),坐标轴:

		var dataset = [ 30 , 20 , 45 , 12 , 21 ];
		var xScale = d3.scale.linear()
							.domain([0,d3.max(dataset)])
							.range([0,500]);				
		var axis = d3.svg.axis()
						.scale(xScale)
						.orient("bottom");
    1-4行是定义数据和 scale (比例),关于比例的内容可看上一节。

    5-7是定义坐标轴:

  • d3.svg.axis() 调用这个函数就会生成一个坐标轴的函数
  • scale() 这个函数用于指定坐标轴的 scale (比例)
  • orient() 这个函数用于指定坐标轴的分割点和数字的朝向,在哪个方向显示。 bottom 表示在坐标轴的下方显示。
    画出坐标轴的代码如下:
		svg.append("g")
			.call(axis);
    在 svg 中添加一个g,g是 svg 中的一个属性,是 group 的意思,它表示一组什么东西,如一组 lines , rects ,circles 其实坐标轴就是由这些东西构成的。
    上面还调用了一个 call 函数,这个比较重要。在 D3 中,call 相当于定义一个函数,再把选择的元素给它,即相当于如下代码:
function foo(selection) {
  selection
      .attr("name1", "value1")
      .attr("name2", "value2");
}
foo(d3.selectAll("div"))
    这段代码等同于:
d3.selectAll("div").call(foo);
    所以 svg.append("g").call(axis) 就相当于将选择的g元素传给 axis 函数。
    调用之后,坐标轴就会显示在相应的 svg 中。
    还可以定义几个css样式改变坐标轴的粗细,字体等等。 transform 属性用于移动坐标轴在 svg 中的位置。
		svg.append("g")
			.attr("class","axis")
			.attr("transform","translate(10,160)")
			.call(axis);
    
    完整的代码如下:
<style>

.axis path,
.axis line{
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
}

.axis text {
	font-family: sans-serif;
	font-size: 11px;
}

</style>
  
    <body>  
		
		<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>  
        <script>
		
		var width = 600;
		var height = 600;
		var dataset = [ 30 , 20 , 45 , 12 , 21 ];
		
		var svg = d3.select("body").append("svg")
								.attr("width",width)
								.attr("height",height);
		
		var xScale = d3.scale.linear()
							.domain([0,d3.max(dataset)])
							.range([0,500]);
							
		var axis = d3.svg.axis()
						.scale(xScale)
						.orient("bottom");
						
		svg.append("g")
			.attr("class","axis")
			.attr("transform","translate(10,160)")
			.call(axis);
		
		svg.selectAll("rect")
		   .data(dataset)
		   .enter()
		   .append("rect")
		   .attr("x",10)
		   .attr("y",function(d,i){
				return i * 30;
		   })
		   .attr("width",xScale)           //注意这里
		   .attr("height",28)
		   .attr("fill","red");
		   
        </script>  

    结果如下图:

    以上,谢谢。



评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值