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>

会生成具有动态效果的坐标轴