d3.js 使用坐标轴

本片blog记录d3坐标轴入门,使用版本v5.9.2

SVG如何实现坐标轴

d3生成的坐标图是通过svg的path(路径)元素 + g + line + text元素组成的,如下图

path表示的是底部坐标轴(不包括内部刻度),如下

这部分通过d描绘,在d3中称为outer tick

g容器则包括了text和line作为inner tick

line即线,text即文字

d3实现坐标轴主要步骤

步骤主要如下:

  1. 创建scale(比例尺)
  2. 创建axis(坐标轴,是个函数)
  3. selection.call(axis)创建坐标轴

小实验

数据与宽高

const data = [1, 10, 20];
let svgWidth = 400,
    svgHeight = 400;

小实验都用这些数据啦

最简单的坐标轴

/**
 * 创建scale
 */
let scale = d3.scaleLinear()
    .domain([0, d3.max(data)]) //值域
    .range([0, 200]); //可视范围
/**
 * 创建axis
 */
let axis = d3.axisTop(scale); //创建坐标轴,除此之外还有axisLeft,axisBottom,axisRight,区别在于tick(刻度)的位置
/**
 * 插入
 */
d3.select('body')
    .append('svg')
    .attr('width', svgWidth)
    .attr('height', svgHeight)
    .append('g')//需要放在g容器里
    .attr('transform', 'translate(10,20)')
    .call(axis);//创建坐标轴

坐标轴的长度来源于比例尺的 range

最大值来源于d3.max(data)

200(range) / 20(最大值) = 10段

20(最大值) / 10段 = 2

所以坐标轴如是显示

仅显示所需的刻度的坐标轴

上一个坐标轴显示了平均的刻度,但是有时这不是我们想要的,我们可以使用axis.tickValues()显示需要的刻度

仅需在axis后增加api即可

let axis = d3.axisTop(scale).tickValues(data);

设置刻度长短

也是使用axis.tickSize()即可,为方便观察,这里使用axisBottom坐标轴

let axis = d3.axisBottom(scale).tickValues(data).tickSize(200);

设置样式

其实设置样式就是对其中的svg设置,原理类似dom操作,选择svg元素,改变样式

举个简单的例子

d3.select('body')
    .append('svg')
    .attr('width', svgWidth)
    .attr('height', svgHeight)
    .append('g')
    .attr('transform', 'translate(10, 20)')
    .call(axis)
    .selectAll('path').attr('stroke', 'pink').attr('stroke-width', '5');

最后对g中的path进行赋样式

总结

组合好不同的API会有更多效果!

参考资料

d3.js直方图与坐标轴基础 d3.js API selection.call() d3中的axis.ticks详解

我来评几句
登录后评论

已发表评论数()

相关站点

热门文章