可视化D3.js库(7)-坐标轴的使用

D3.js库-7-添加坐标轴

坐标轴是可视化图表中经常出现的一种图形，由一些刻度和线列段组成。D3中是没有现成的坐标轴，SVG中因而没有现成的图形元素，需要通过D3提供的其他组件来手动添加。下图是添加了坐标轴之后的效果图。

image

坐标轴+刻度尺

坐标轴构成

在SVG画布的预定义元素中，有6种基本的图形：

• 矩形

• 圆形

• 椭圆

• 线段

• 折线

• 多边形

还有一种特殊的元素就是：路径path

几乎画布中的所有图形都是由以上7种元素构成的。上述元素中没有坐标轴，采用类似的定义方式：将axis看做是一个标签，x1、x2等看做是它的一个个属性

...

分组元素g

由于没有上述的元素，需要其他的元素来组合构成类似的形式：

    

       
       


       
       

...
    
    

分组元素是SVG画布中的元素，意思就是group，是将其他元素进行组合和分组存放。D3中提供了一个组件能够自动添加：d3.svg.axis()

每个分组g看做是一个刻度值和线段组成的group。

定义一个坐标轴

定义一个坐标轴需要使用上一篇文章中使用的比例尺。它们二者经常是一起使用的。

// 定义数据
const dateset = [80,160,20,100,300]
// 定义一个线性比例尺
const scaleLinear = d3.scaleLinear()
                        .domain([0, d3.max(dataset)])  // 映射区间
                        .range([0,250]);

const axis = d3.axisBottom(scaleLinear)  // 定义向下的坐标轴
                .ticks(7);  // 坐标轴上的刻度数

g.append("g")  // 追加足够多的g元素
    .attr("transform","translate(" + 30 + (dataset.length * rectHeight) + ")")  // 设置位置信息
    .call(axis)   // 定义的比例尺本身就是函数，需要进行回调

柱状图加上坐标轴

下面是完整的代码