d3.js - .ticks() 工作需要什么？

Question

.ticks() 似乎不适用于我的条形图。有人可以看看吗？

这是小提琴。我在对象开头附近的 x 轴上设置了刻度：

xAxis = d3.svg.axis().scale(xScale).orient("bottom").ticks(3),

Answer 1

我没有足够的声誉给第一篇文章添加评论，但我认为存在误解。

轴上的标签必须是 2、5 或 10 的倍数。 ticks 函数可以采用任何数字，但它会修改该数字以确保轴是 2、5 或 10 的倍数。

例如，如果域是 0-100 并且您想要 4 个刻度（0、33.33、66.66、100），它将向上舍入到 6 以给您“漂亮”的数字（0、20、40、60、80、100） . 但是，如果您将刻度设置为 3，它将尊重这一点，您将拥有 0、50 和 100。

这是 Mike 对这种行为的解释的帖子。

我仍然不清楚如果您将刻度设置为 5，为什么它不会计算 0、25、50、75、100，但我想我会尝试至少消除一些混乱。

Answer 2

ticks 只能取 2,5,10 的倍数，而不是任何数字。这就是为什么你可能会遇到问题。请查看此答案以获取自定义刻度。关联

Answer 3

您可以使用过滤器来决定显示哪些刻度：

var xAxis = d3.svg.axis()
    .scale(x)
    .tickValues(x.domain().filter(function(d, idx) { return idx%2==0 }))
    .orient("bottom");

上面的片段来自这个例子。

Answer 4

执行此操作的 css 方法是隐藏您不想要的第 n 个轴元素。对我来说，d3 滴答声总是很烦人。

.tick:nth-of-type(6) > text {
    display: none;
  }
  .tick:nth-of-type(7) > text {
    display: none;
  }
  .tick:nth-of-type(8) > text {
    display: none;
  }