d3--比例尺的理解

d3 v4

例：let scale = d3.scaleBand().domain(['a', b', 'c']).range([h, 0]);

range: 轴的长度, 即在画布中的实际长度

domain: 轴的刻度

scale() 函数, 即 domain 跟 range 的映射

scaleBand, 起点不在端点，第一个刻度或最后一个刻度据端点 scale.step() 长度

即刻度 'a' 在画布中的位置 scale('a') + scale.step()

还有最常见的从端点开始的比例尺 d3.scaleLinear().domain(['a', b', 'c']).range([h, 0]);

这时刻度 'a' 在画布中的位置 scale('a')

坐标轴

这里写一下用法，具体的设置可以参考官网

x 轴

let axisX = d3.axisBottom().scale(scale).tickSize(0).tickPadding(12);
svg.append('g').call(axisX)

y 轴

let axisY = d3.axisLeft().scale(scale).tickSize(0).tickPadding(12);
svg.append('g').call(axisY)

这些就可以写一个基本的坐标轴用了, 很简陋.

我是虚玩玩，与君共勉~