D3.js库-7-添加坐标轴
坐标轴
坐标轴是可视化图表中经常出现的一种图形,由一些刻度和线列段组成。D3中是没有现成的坐标轴,SVG中因而没有现成的图形元素,需要通过D3提供的其他组件来手动添加。下图是添加了坐标轴之后的效果图。
坐标轴构成
在SVG画布的预定义元素中,有6种基本的图形:
- 矩形
- 圆形
- 椭圆
- 线段
- 折线
- 多边形
还有一种特殊的元素就是:路径path
几乎画布中的所有图形都是由以上7种元素构成的。上述元素中没有坐标轴,采用类似的定义方式:将axis看做是一个标签,x1、x2等看做是它的一个个属性
1 | <axis x1="" x2="">...</axis> |
分组元素g
由于没有上述的元素,需要其他的元素来组合构成类似的形式:
1 | <g> |
分组元素是SVG画布中的元素,意思就是group,是将其他元素进行组合和分组存放。D3中提供了一个组件能够自动添加:d3.svg.axis()
每个分组g看做是一个刻度值和线段组成的group。
定义一个坐标轴
定义一个坐标轴需要使用上一篇文章中使用的比例尺。它们二者经常是一起使用的。
1 | // 定义数据 |
柱状图加上坐标轴
下面是完整的代码
1 | <!DOCTYPE html> |