【 D3.js 入门系列 --- 5 】 怎样加入坐标轴
2017-05-06 16:21
316 查看
本人的个人博客为: www.ourd3js.com
csdn博客为:
blog.csdn.net/lzhlzz
转载请注明出处。谢谢。
第3节中做了一个图标。但没有为它加入一个对应的坐标轴。这样不知道每个柱形究竟有多长。这一节做一个坐标轴。
D3中的坐标轴都是以 svg 图的形式出现的,这也是为什么在第3节中要使用 svg 的方法做柱形图的原因。
第4节里我们解说了 scale (比例)的使用方法,在做坐标轴的时候也须要用到比例。第4节中,我们说到scale 是一个函数。这一节中的坐标轴也是一个函数,可是使用方法却有点不同,要注意。
看以下的代码,我们分别定义数据,scale (比例),坐标轴:
5-7是定义坐标轴:
d3.svg.axis() 调用这个函数就会生成一个坐标轴的函数
scale() 这个函数用于指定坐标轴的 scale (比例)
orient() 这个函数用于指定坐标轴的切割点和数字的朝向,在哪个方向显示。 bottom 表示在坐标轴的下方显示。
画出坐标轴的代码例如以下:
上面还调用了一个 call 函数,这个比較重要。在 D3 中,call 相当于定义一个函数。再把选择的元素给它。即相当于例如以下代码:
调用之后。坐标轴就会显示在对应的 svg 中。
还能够定义几个css样式改变坐标轴的粗细。字体等等。 transform 属性用于移动坐标轴在 svg 中的位置。
完整的代码例如以下:
结果例如以下图:
以上。谢谢。
csdn博客为:
blog.csdn.net/lzhlzz
转载请注明出处。谢谢。
第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.1 】 做一个带坐标轴和标签的图表
- 【 D3.js 入门系列 --- 4 】 怎样使用scale(比例)
- 【 D3.js 入门系列 --- 5.1 】 做一个带坐标轴和标签的图表
- 【 D3.js 入门系列 --- 5 】 如何添加坐标轴
- 【 D3.js 入门系列 --- 5.1 】 做一个带坐标轴和标签的图表
- 【 D3.js 入门系列 --- 2.1 】 关于怎样选择,插入,删除元素
- 【 D3.js 入门系列 --- 2 】 怎样使用数据和选择元素
- 【 D3.js 入门系列 --- 5 】 如何添加坐标轴
- 【 D3.js 入门系列 — 5 】 坐标轴
- 【 D3.js 入门系列 --- 9 】 常见可视化图形
- 【 D3.js 入门系列 --- 9.3 】 弦图的制作
- 【 D3.js 入门系列 --- 9.1 】 饼状图的制作
- 【 D3.js 入门系列 --- 6 】 如何使移动图表
- 【 D3.js 入门系列 — 3 】 做一个简单的图表!
- 【 D3.js 视频系列 】 飞速入门
- 【 D3.js 入门系列 --- 6 】 如何让图表动起来
- 【 D3.js 入门系列 — 1 】 第一个程序 HelloWorld
- 【 D3.js 入门系列 --- 8 】 对话操作(事件)
- 【 D3.js 入门系列 — 10.3 】 GeoJSON 和 TopoJSON 文件有什么不同?
- 【 D3.js 入门系列 --- 0 】 简介和安装