【 D3.js 入门系列 --- 5 】怎样加入坐标轴

本人的个人博客为： www.ourd3js.com

转载请注明出处。谢谢。

第3节中做了一个图标。但没有为它加入一个对应的坐标轴。这样不知道每个柱形究竟有多长。这一节做一个坐标轴。

D3中的坐标轴都是以 svg 图的形式出现的，这也是为什么在第3节中要使用 svg 的方法做柱形图的原因。

第4节里我们解说了 scale （比例）的使用方法，在做坐标轴的时候也须要用到比例。第4节中，我们说到scale 是一个函数。这一节中的坐标轴也是一个函数，可是使用方法却有点不同，要注意。

看以下的代码，我们分别定义数据，scale （比例），坐标轴：

		var dataset = [ 30 , 20 , 45 , 12 , 21 ];

		var xScale = d3.scale.linear()

							.domain([0,d3.max(dataset)])

							.range([0,500]);

		var axis = d3.svg.axis()

						.scale(xScale)

						.orient("bottom");

1-4行是定义数据和 scale （比例），关于比例的内容可看上一节。

5-7是定义坐标轴：

d3.svg.axis() 调用这个函数就会生成一个坐标轴的函数
scale() 这个函数用于指定坐标轴的 scale （比例）
orient() 这个函数用于指定坐标轴的切割点和数字的朝向，在哪个方向显示。 bottom 表示在坐标轴的下方显示。

画出坐标轴的代码例如以下：

		svg.append("g")

			.call(axis);

在 svg 中加入一个g，g是 svg 中的一个属性，是 group 的意思。它表示一组什么东西，如一组 lines ， rects ，circles 事实上坐标轴就是由这些东西构成的。

上面还调用了一个 call 函数，这个比較重要。在 D3 中，call 相当于定义一个函数。再把选择的元素给它。即相当于例如以下代码：

function foo(selection) {

  selection

      .attr("name1", "value1")

      .attr("name2", "value2");

}

foo(d3.selectAll("div"))

这段代码等同于：

d3.selectAll("div").call(foo);

所以 svg.append("g").call(axis) 就相当于将选择的g元素传给 axis 函数。

调用之后。坐标轴就会显示在对应的 svg 中。

还能够定义几个css样式改变坐标轴的粗细。字体等等。 transform 属性用于移动坐标轴在 svg 中的位置。

		svg.append("g")

			.attr("class","axis")

			.attr("transform","translate(10,160)")

			.call(axis);

完整的代码例如以下：

<style>

.axis path,

.axis line{

	fill: none;

	stroke: black;

	shape-rendering: crispEdges;

}

.axis text {

	font-family: sans-serif;

	font-size: 11px;

}

</style>

    <body>  

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

        <script>

		var width = 600;

		var height = 600;

		var dataset = [ 30 , 20 , 45 , 12 , 21 ];

		var svg = d3.select("body").append("svg")

								.attr("width",width)

								.attr("height",height);

		var xScale = d3.scale.linear()

							.domain([0,d3.max(dataset)])

							.range([0,500]);

		var axis = d3.svg.axis()

						.scale(xScale)

						.orient("bottom");

		svg.append("g")

			.attr("class","axis")

			.attr("transform","translate(10,160)")

			.call(axis);

		svg.selectAll("rect")

		   .data(dataset)

		   .enter()

		   .append("rect")

		   .attr("x",10)

		   .attr("y",function(d,i){

				return i * 30;

		   })

		   .attr("width",xScale)           //注意这里

		   .attr("height",28)

		   .attr("fill","red");

        </script>

结果例如以下图：

以上。谢谢。

巴特西

【 D3.js 入门系列 --- 5 】怎样加入坐标轴

最新文章

热门文章

巴特西

【 D3.js 入门系列 --- 5 】 怎样加入坐标轴

最新文章

热门文章

【 D3.js 入门系列 --- 5 】怎样加入坐标轴