javascript - 如何在 d3 中指定轴刻度线的数量？

Question

我在 d3 中创建了一个简单的条形图，并使用 '.ticks(3)' 格式化 y 轴，表示我希望看到 3 个刻度线。但是，根据数据，我有时会看到 3 个刻度线，有时会看到 4 个刻度线。此外，即使我确实得到 3 个刻度线，刻度线也位于轴标签上方的 1/4 左右，然后是 50%，然后是另一个在 3/4。如何强制 d3 设置 3 个轴标签，一个在底部，一个在中间，一个在顶部？

Answer 1

您可以将刻度数组传递给轴，然后轴将在数组中的点处绘制刻度。

这是一些示例代码。创建一个在 0 到 100 之间运行的轴。根据“刻度”数组，刻度标记绘制在 0、50、60 和 100 处。

svg = d3.select("svg")

var myScale = d3.scale.linear()
        .domain([0,100])
        .range([0,400]);


var ticks = [0,50,60,100];

var myAxis = d3.svg.axis()
  .scale(myScale)
  .tickValues(ticks);

svg.append("g")
.attr("class", "axis")
.call(myAxis)
.attr("transform","translate(100,100)");

这是一个交互式示例： http ://tributary.io/inlet/5207532