D3js 可视化 优雅制作简单条形图 pop2010

人外有人山外有山 条形图外有条形图

之前讲了完完全全没有涉及到js的条形图
讲了没有用到除了0以外数字的条形图
可

还是

没有

优雅发挥D3的所有功能

于是，接着修改原来的条形图
GO
GO
GO
对比图（左边是原来的，右边是优雅系列嘻嘻嘻）

表面上看差不太多

实际上 内心已经收到升华变得优雅了ohhahah

JUST　DO　IT
————————
！注意

1. ｃａｌｌ
2. ｒａｎｇｅＢａｎｄ　和　ｒａｎｇｅＢａｎｄｓ
3. ａｔｔｒ　和　ａｐｐｅｎｄ

——————————————————
首先，这次要改造的代码
?

		var barLabelGroup = svg.append("g")
			.attr("class","bar-label");
		
		barLabelGroup.selectAll("text")
						.data(popData)
						.enter()
						.append("text")
						.attr("x",-10)
						.attr("y",function(d){return d.position*barSpacing+barHeight*(2/3)})
						.text(function(d){return d.age});
		
		var axisTickGroup = svg.append("g")
								.attr("stroke","black");
		
		axisTickGroup.selectAll("line")
						.data(axisData)
						.enter()
						.append("line")
						.attr("x1",function(d){ return x(d)})
						.attr("x2",function(d){return x(d)})
						.attr("y1",0)
						.attr("y2",-tickHeight);

		var axisLabelGroup = svg.append("g")
								.attr("class","axis-label");
		
		axisLabelGroup.selectAll("text")
						.data(axisData)
						.enter()
						.append("text")
						.attr("x",function(d){return x(d)})
						.attr("y",-tickHeight-tickGap)
						.text(function(d){return d + "%"});

要来个比例尺，来个坐标轴

		var x = d3.scale.linear()
					.domain([0,maxDataset])
					.range([0,width]);
		var xAxis = d3.svg.axis()
					.scale(x)
					.orient("top")
					.ticks(5,"%");

		var y = d3.scale.ordinal()
					.domain(popData.map(function(element){
						return element.age
					}))
					.rangeBands([0,height],0.2,0);

		var yAxis = d3.svg.axis()
						.scale(y)
						.orient("left");
		
		svg.append("g")
			.call(xAxis)
			.attr("class","x axis");
		svg.append("g")
			.call(yAxis)
			.attr("class","y axis");
		

还要搞个　边距,
相应的位置 参数要改一下

		var margin = {top: 30,right: 0,bottom: 0,left: 100},
			width = 500 - margin.left - margin.right,
			height = 330 -margin.top - margin.bottom;
			
	//举个栗子，就像这样
		var svg = body.append("svg")
						.attr("width",width + margin.left + margin.right)
						.attr("height",height + margin.top + margin.bottom)
					.append("g")
						.attr("transform","translate("+margin.left+","+margin.top+")");
	//还有其他…………

记得进行样式上的修改（样式就不放啦）
就是改下line和stroke，fill，font-size啥的
把其他没有用的东西删掉，大快人心