d3.js學習13

表格線

---

 

先定義svg環境

var height = 500,
      width = 500,
      margin = 25;

var svg = d3.select("body").append("svg")
	.attr("class","axis")
	.attr("width", width)
	.attr("height", height);

繪製X軸

function renderXAxis(){
	var axisLength = width - 2 * margin;//定義尺度的值域
	var scale = d3.scale.linear()
		.domain([0,100])
		.range([0,axisLength]);//設置尺度
	var xAxis = d3.svg.axis()
		.scale(scale)
		.orient("bottom");//x軸
	svg.append("g")//g表明一組圖形，加到svg中
		.attr("transform",function(){
			return "translate(" + margin + "," + (height - margin) + ")";//transform.translate定義2d轉換
		})
　　　　　　　　　 .attr("class","x-axis")//設定包含10個g的大類g類名爲x-axis
		.call(xAxis);//call至關於調用xAxis這個變量或方法
}
renderXAxis();

能夠看出，生成了值域爲0-100的一組（10個）"g"，它的類別爲"tick"。在renderXAxis()方法中添加代碼（call()方法以後）

d3.selectAll("g.x-axis g.tick")//選中全部g下類別爲tick
	.append("line")
	.classed("grid-line",true)
	.attr("x1",0)//起點橫座標
	.attr("y1",0)
	.attr("x2",0)
	.attr("y2",-(height - 2* margin));

爲何要設置x-axis這個類別而不直接使用g.tick？由於一下子還要畫縱座標。

在svg中，0，0座標表明左上角

附translate.transform（x,y），在這裏。

同理，繪製出renderYAxis()方法

function renderYAxis(){
	var axisLength = height - 2* margin;
	var scale = d3.scale.linear()
		.domain([100,0])
		.range([0, axisLength]);
	var yAxis = d3.svg.axis()
		.scale(scale)
		.orient("left");

		svg.append("g")
		.attr("class","y-axis")
		.attr("transform",function(){
			return "translate(" + margin + "," + margin + ")";
		})
		.call(yAxis);

		d3.selectAll("g.y-axis g.tick")
			.append("line")
			.classed("grid-line",true)
			.attr("x1",0)
			.attr("y1",0)
			.attr("x2",axisLength)
			.attr("y2",0);
}

這裏注意2點，第一點爲值域爲100到0，由於縱座標是由上向下，第二點是虛線的位置。

結果：

 動態尺度網格線

---

 

var height = 500,
	width = 500,
	margin = 50,
	xAxis, yAxis, xAxisLength, yAxisLength;

var svg = d3.select("body").append("svg")
	.attr("class","axis")
	.attr("width", width)
	.attr("height", height);

橫座標函數，與上例基本一致，某些變量改成環境變量（用於rescale）

function renderXAxis(){
	xAxisLength = width - 2 * margin;//定義尺度的值域
	var scale = d3.scale.linear()
		.domain([0,100])
		.range([0,xAxisLength]);//設置尺度
	xAxis = d3.svg.axis()
		.scale(scale)
		.orient("bottom");//x軸
	svg.append("g")//g表明一組圖形，加到svg中
		.attr("class","x-axis")
		.attr("transform",function(){
			return "translate(" + margin + "," + (height - margin) + ")";//transform.translate定義2d轉換
	})
	.call(xAxis);//call至關於調用xAxis這個變量或方法

	d3.selectAll("g.x-axis g.tick")
		.append("line")
		.classed("grid-line",true)
		.attr("x1",0)//起點橫座標
		.attr("y1",0)
		.attr("x2",0)
		.attr("y2",-(height - 2* margin));
}

Y座標軸同理

function renderYAxis(){
	yAxisLength = height - 2* margin;
	var scale = d3.scale.linear()
		.domain([100,0])
		.range([0, yAxisLength]);
	yAxis = d3.svg.axis()
		.scale(scale)
		.orient("left");

	svg.append("g")
		.attr("class","y-axis")
		.attr("transform",function(){
			return "translate(" + margin + "," + margin + ")";
		})
		.call(yAxis);

	d3.selectAll("g.y-axis g.tick")
		.append("line")
		.classed("grid-line",true)
		.attr("x1",0)
		.attr("y1",0)
		.attr("x2",yAxisLength)
		.attr("y2",0);
}

調整內部網格線的方法（刪除舊的-添加新的-畫線）

function renderXGridLines(){
	var lines = d3.selectAll("g.x-axis g.tick")
		.select("line.grid-line")
		.remove();

	lines = d3.selectAll("g.x-axis g.tick")
		.append("line")
		.classed("grid-line",true);

	lines.attr("x1",0)
		.attr("y1",0)
		.attr("x2",0)
		.attr("y2",-yAxisLength);
}
function renderYGridLines(){
	var lines = d3.selectAll("g.y-axis g.tick")
		.select("line.grid-line")
		.remove();

	lines = d3.selectAll("g.y-axis g.tick")
		.append("line")
		.classed("grid-line",true);

	lines.attr("x1",0)
		.attr("y1",0)
		.attr("x2", xAxisLength)
		.attr("y2",0);
}

重作尺度，調用繪製新網格線

這裏生成了一個max的隨機數，用於重作尺度值域，實際狀況替換便可

function rescale(){
	var max = Math.round(Math.random()*100);

	xAxis.scale().domain([0,max]);//更改值域
	svg.select("g.x-axis")
		.transition()
		.call(xAxis);

	yAxis.scale().domain([max,0]);//更改值域
	svg.select("g.y-axis")
		.transition()
		.call(yAxis);

	renderXGridLines();
	renderYGridLines();
}

最後，依舊是調用繪製座標軸

renderXAxis();
renderYAxis();

使用button調用rescale函數

<div class="control-group">
	 <button onclick="rescale()">ReScale</button>
</div>

會生成具備動態效果的座標軸