d3中的axis.ticks详解

最新推荐文章于 2024-06-07 09:43:30 发布

H_MZ

最新推荐文章于 2024-06-07 09:43:30 发布

阅读量2.6k

点赞数 4

文章标签： r语言

原文链接：https://segmentfault.com/a/1190000008750211

版权

本文详细探讨了d3中axis.ticks()方法在设定坐标轴分段时的规则和特性。通过案例分析，揭示了该方法并不直接决定分段数量，而是基于2, 5, 10的倍数进行计算，并与定义域相关。同时，文章指出，ticks值实际上是除数，而非段数，其效果取决于与定义域的关系。最后，文章还介绍了d3的ticks算法源码，强调了tickStep函数在计算过程中的关键作用。" 123671544,12750304,Qt控件详解：列表、表格与树形视图操作,"['Qt开发', 'GUI编程', '数据展示', '用户交互']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

d3中有一个和坐标轴相关的方法，即axis.ticks().但是它的用法让人琢磨不透，本文就试图通过一些案例来对其进行详细的解释。

axis.ticks()用来设定分段数量

当通过比例尺创建一个y坐标轴的时候，可能你只想让你的y轴坐标刻度只显示两个，即只有收尾，怎么办？把ticks()参数设为1即可：

let scale = d3.scale.linear()
  .domain([0, 100])
  .range([0, 300])

let axis = d3.svg.axis()
  .scale(scale)
  .orient('left')
  .ticks(1)

设为1表示整个y轴被分为1段，两头都会出现一个刻度，所以就会出现两个刻度。同样的道理，设置为2则会出现两段三个刻度，设置为5则会出现5段6个刻度。

然而，当你设置为3的时候，奇怪的事情发生了。并没有出现3段4个刻度的结果，而是出现了2段3个刻度。这是怎么回事呢？

axis.ticks()的分段规则

之所以3不起作用了，是因为定义域domain中的[0, 100]无法计算得出对应的结果。在这个回答里，mbostock指出，无论你怎么设定，ticks的参数实际上都是在2,5和10这三个中选。

The default ticks for quantitative scales are multipl

最低0.47元/天解锁文章