D3 js 数据可视化的起点——条形图+柱形图

我的第一个？

嗯 带坐标轴的丑陋且美丽的 条形图

——介绍完毕，接下来贴代码
我发现，我这个人，啥都不会，却啥都要学
氦，先学着吧

三天前？接触D3 js 啥都，不会，上学期学了点HTML了解了下CSS不知道算不算有点常识，硬着头皮，看了几页书，对着网站，敲的代码。
嗯，说说遇到的奇葩的事情：

1. !一定一定要引用 d3.js 源文件嚯嚯嚯
2. append 函数和 insert 函数插入元素的时候，谁在前面谁先搞事情，应该也算是个常识吧，我了解了（手动滑稽）另外，insert 不是inset!!
3. 也不知道专业的术语叫什么，反正一行代码你敲完后一定要加分号，（不然他也不会报错，我找了好久呢，氦，心可真大，万分着急 氦溴）有头有尾鸭。还有js直接可以把好多个函数串起来，很神奇。
4. 比例尺是个好东西，以后一定要熟练地敲出来
5. 坐标轴这个东西要写在条形图的下面？我也不知道为什么，位置反了就不行了 汗- -||

效果图
（虽然很丑，但是是我亲手创造出来的）

	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
        <script>
        	var width = 300;
        	var height = 300;
        	var svg = d3.select("body")
        				.append("svg")
        				.attr("width",width)
        				.attr("height",height);

        	var index = [0,1,2,3,4];
        	var color = ["red","blue","green","yellow","black"];
        	var ordinal = d3.scale.ordinal()
        					.domain(index)
        					.range(color);
        					
        	var dataset = [1.2,2.3,0.9,1.5,3.3];

        	var min = d3.min(dataset);
        	var max = d3.max(dataset);
        	var linear = d3.scale.linear()
        				   .domain([0,max])
        				   .range([0,250]);
        	var rectHeight = 25;
        	svg.selectAll("rect")
        	   .data(dataset)
        	   .enter()
        	   .append("rect")
        	   .attr("x",20)
        	   .attr("y",function(d,i){
        	   	return i*rectHeight;
        	   })
        	   .attr("width",function(d){
        	   	return linear(d);
        	   })
        	   .attr("height",rectHeight-5)
        	   .attr("fill",function(d,i){
        	   	return ordinal(i);
        	   });

        	var axis = d3.svg.axis()
        				   .scale(linear)//指定比例尺
        				   .orient("bottom")//刻度方向
        				   .ticks(7);//刻度数量
			
        	svg.append("g")
        	   .attr("class","axis")
        	   .attr("transform","translate(20,130)")
        	   .call(axis);
        	
        </script>

菜鸡需要仪式感
加油加油加油

突然变成柱形图

有些复杂起来了
但我知道
这才刚刚开始
嗯 继续努力啊陈杉

效果图

里面有些css的代码没有贴出来

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script>

		var rectPadding = 4;
		var width =430;
		var height =430;
		var svg = d3.select("body")
					.append("svg")
					.attr("width",width)
					.attr("height",height);
		var padding = {left:30,right:30,top:20,bottom:20};
		var dataset = [20,10,33,12,30,5,40,24];

		var xScale = d3.scale.ordinal()
								.domain(d3.range(dataset.length))
								.rangeRoundBands([0,width-padding.left-padding.right]);
		var yScale = d3.scale.linear()
								.domain([0,d3.max(dataset)])
								.range([height-padding.top-padding.bottom,0]);
		var color = ["red","yellow","green","black","blue","gray","pink","purple"];
		var colorScale = d3.scale.ordinal()
									.domain(d3.range(dataset.length))
									.range(color);
		var xAxis = d3.svg.axis()
						.scale(xScale)
						.orient("bottom");
		var yAxis = d3.svg.axis()
						.scale(yScale)
						.orient("left");
		
		var rectPadding = 4;
		var rects = svg.selectAll(".MyRect")
						.data(dataset)
						.enter()
						.append("rect")
						.attr("class","MyRect")
						.attr("transform","translate("+padding.left+","+padding.top+")")
						.attr("x",function(d,i){
							return xScale(i)+rectPadding/2;
						})
						.attr("y",function(d,i){
							return yScale(d);
						})
						.attr("width",xScale.rangeBand()-rectPadding)
						.attr("height",function(d){
							return height-padding.top-padding.bottom-yScale(d);
						})
						.attr("fill",function(d,i){
							return colorScale(i);
						})
		
		var texts = svg.selectAll(".MyText")
						.data(dataset)
						.enter()
						.append("text")
						.attr("class","MyText")
						.attr("transform","translate("+ padding.left+","+padding.top+")")
						.attr("x",function(d,i){
							return xScale(i)+rectPadding/2;
						})
						.attr("y",function(d){
							return yScale(d);
						})
						.attr("dx",function(){
							return (xScale.rangeBand()-rectPadding)/2;
						})
						.attr("dy",function(){
							return 20;
						})
						.text(function(d){
							return d;
						});

		svg.append("g")
			.attr("class","axis")
			.attr("transform","translate("+padding.left+","+(height-padding.bottom)+")")
			.call(xAxis);
		svg.append("g")
			.attr("class","axis")
			.attr("transform","translate("+padding.left+","+padding.top+")")
			.call(yAxis);
	</script>