【D 3.js入門シリーズ---5.1】座標軸とラベル付きのグラフを作成する

私の個人ブログは:www.ourd 3 js.com 
csdnブログは:blog.csdn.net/lzhlzz 
転載は出典を明記してください.ありがとうございます.
前のセクションでは、アイコン、座標軸、スケールなどについて説明します.このセクションでは、これらの内容を統合して実用的なグラフを作成します.結果図は次のとおりです.
    
コードは次のとおりです.

  
    
          
          
   


      
		  
        
		
		var width = 600;
		var height = 600;
		var dataset = [];
		var num = 15;  // 
		
		for(var i = 0; i < num ; i++){
			var tempnum = Math.floor( Math.random() * 50 );   //   0~49  
			dataset.push(tempnum);
		}
		
		var svg = d3.select("body").append("svg")
								.attr("width",width)
								.attr("height",height);
		
		var xAxisScale = d3.scale.ordinal()
						.domain(d3.range(dataset.length))
						.rangeRoundBands([0,500]);
							
		var yAxisScale = d3.scale.linear()
						.domain([0,d3.max(dataset)])
						.range([500,0]);
							
		var xAxis = d3.svg.axis()
						.scale(xAxisScale)
						.orient("bottom");
		
		var yAxis = d3.svg.axis()
						.scale(yAxisScale)
						.orient("left");

		var xScale = d3.scale.ordinal()
						.domain(d3.range(dataset.length))
						.rangeRoundBands([0,500],0.05);
							
		var yScale = d3.scale.linear()
						.domain([0,d3.max(dataset)])
						.range([0,500]);
		
		svg.selectAll("rect")
		   .data(dataset)
		   .enter()
		   .append("rect")
		   .attr("x", function(d,i){
				return 30 + xScale(i);
		   } )
		   .attr("y",function(d,i){
				return 50 + 500 - yScale(d) ;
		   })
		   .attr("width", function(d,i){
				return xScale.rangeBand();
		   })
		   .attr("height",yScale)
		   .attr("fill","red");
		   
		svg.selectAll("text")
            .data(dataset)
            .enter().append("text")
            .attr("x", function(d,i){
				return 30 + xScale(i);
		   } )
		   .attr("y",function(d,i){
				return 50 + 500 - yScale(d) ;
		   })
            .attr("dx", function(d,i){
				return xScale.rangeBand()/3;
		   })
            .attr("dy", 15)
			.attr("text-anchor", "begin")
			.attr("font-size", 14)
			.attr("fill","white")
            .text(function(d,i){
				return d;
			});
		   
		svg.append("g")
			.attr("class","axis")
			.attr("transform","translate(30,550)")
			.call(xAxis);
			
		svg.append("g")
			.attr("class","axis")
			.attr("transform","translate(30,50)")
			.call(yAxis); 
		
		  
          
		
      
  

以下では、上記のコードについて説明します.

31-34行:ランダムにデータを生成し、配列

に割り当てます.

36-38行:svg

を定義する

4-54行:座標軸を定義するscale(スケール)と座標軸、48行x軸、52行y軸

56-62行:柱図を定義するscale

64-78行:柱図を描き、scaleの使用に注意

80-98行:文字ラベルを描画し、scale

にも注意します.

100-108行:ドラフト軸

注意:描画するときは、描画の順序に注意してください.そうしないと、必要なものを上書きする可能性があります.特に座標軸は、最後にペイントしたほうがいいです.