D3.js 入门系列 --- 5 如何添加坐标轴
Posted 冷雨恋晴
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了 D3.js 入门系列 --- 5 如何添加坐标轴相关的知识,希望对你有一定的参考价值。
第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);
上面还调用了一个 call 函数,这个比较重要。在 D3 中,call 相当于定义一个函数,再把选择的元素给它,即相当于如下代码:
- function foo(selection) {
- selection
- .attr("name1", "value1")
- .attr("name2", "value2");
- }
- foo(d3.selectAll("div"))
- d3.selectAll("div").call(foo);
调用之后,坐标轴就会显示在相应的 svg 中。
还可以定义几个css样式改变坐标轴的粗细,字体等等。 transform 属性用于移动坐标轴在 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>
结果如下图:
博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz
以上是关于 D3.js 入门系列 --- 5 如何添加坐标轴的主要内容,如果未能解决你的问题,请参考以下文章