d3.js學習10

座標軸-橫向d3.svg.axis

---

 

var height=500,
width=500,
margin=25,
offset=50,
axisWidth=width-2*margin,
svg;

function createSVG(){
	svg=d3.select("body").append("svg")
		.attr("class","axis")
		.attr("width",width)
		.attr("height",height);
}

function renderAxis(scale,i,orient){
	var axis=d3.svg.axis()
		.scale(scale)//數值尺度
		.orient(orient)//方向
		.ticks(5);//5個刻度

	svg.append("g")
	.attr("transform",function(){//水平或垂直
	if(["top","bottom"].indexOf(orient)>=0){
		return "translate("+margin+","+i*offset+")";//i爲移動的距離
        }else{
		return "translate("+i*offset+","+margin+")";
	}})
	.call(axis);
}    

function renderAll(orient){
	if(svg){svg.remove();}
	createSVG();
	renderAxis(d3.scale.linear()
        .domain([0,1000])
        .range([0,axisWidth]),1,orient);
}

renderAll("top");//top時，座標位於軸上面,bottom在下面        

改成renderAll("bottom");

 

改成日期尺度

把width設爲1000，ticks(12)

renderAxis(d3.time.scale().domain([new Date(2014,0,1),new Date()]).range([0,axisWidth]),1,orient);

tickPadding(value)

var axis=d3.svg.axis()
	.scale(scale)//數值尺度
	.orient(orient)//方向
	.ticks(12)//5個刻度
	.tickPadding(20);//設定座標文字距離座標的距離

tickFormat(function(){...})

var axis=d3.svg.axis()
	.scale(scale)//數值尺度
	.orient(orient)//方向
	.ticks(12)//5個刻度
	.tickPadding(20)
	.tickFormat(function(v){
		return v+".00"//格式化座標軸文字
});

　　圖片同上