d3.v5各种scale傻傻分不清

在d3.js的语境下，scale用来生成某集合与实数的映射。它的一个重要用途是生成坐标轴：

let axis = d3.axisXXX(scale);    // 如此就得到了一个坐标轴生成器

这里的XXX有四个选项，分别是Left、Right、Top、Bottom，用来表示生成坐标轴的摆放位置，这里暂且不多说。

而scale的一般用法是：

let scale = d3.scaleXXX().domain(param).range(param);

 domain()指示了数据的范围，range()指示了坐标轴的实际绘制范围。

而这里的XXX种类多达16个，分别有着各种不同的用处，比如生成线性轴、对数轴、开平方轴、时间轴、类目轴等等。由于名字太多容易忘掉，查API又太麻烦，这里专门列一下：

• d3.scaleBand() - 柱状图表专用轴
• d3.scaleDiverging()
• d3.scaleIdentity()
• d3.scaleInplicit()
• d3.scaleLinear() - 线性轴
• d3.scaleLog() - 对数轴
• d3.scaleOrdinal()
• d3.scalePoint() - 离散点
• d3.scalePow() - 指数轴
• d3.scaleQuantile()
• d3.scaleQuantize()
• d3.scaleSequential()
• d3.scaleSqrt() - 方根轴
• d3.scaleThreshold()
• d3.scaleTime() - 时间轴
• d3.scaleUtc()

 

参考

https://github.com/d3/d3/blob/master/API.md

https://devdocs.io/d3~5/