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/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章