D3.js 给出了错误的刻度数

Question

我指定我想要 3 个刻度，但我在 d3 js 中得到 4 个刻度

我在 y 轴上有这些值

[2, 1, 3, 2, 4, 4, 6]

svg
  .select(`[data-labels-y]`)
  .call(d3.axisLeft().scale(yScale).ticks(3).tickPadding(4))`

我期待

[0, 3, 6] - min, middle, max

我明白了

[0, 2, 4, 6]

这很奇怪，我特意指定了刻度数，它是3

Answer 1

不清楚您是否有疑问，但是根据文档，“指定的计数只是一个提示；根据域的不同，比例尺可能会返回更多或更少的值”。目标是生成非常适合各种图表的标记点。

如果您想指定精确的刻度线，只需使用

.tickValues

，而不是

.ticks

。例如：

let div = d3.select('#ax');

let w = 400;
let h = 80;
let svg = div.append('svg')
  .attr("width", "100%")
  .attr("overflow", "visible")
  .attr("viewBox", [0, 0, w, h]);

let [xmin, xmax] = [-0.4, 6.4];
let x_scale = d3.scaleLinear().domain([xmin, xmax]).range([0, w]);

// Draw the axis
let axis = svg
  .append("g")
  .attr("transform", `translate(0, ${h / 2})`)
  .call(
    d3.axisBottom(x_scale)
      .tickValues([0, 3, 6])
      .tickFormat(d3.format("d"))
      .tickSizeOuter(0)
  );

<div id="ax"></div>
<script src="https://d3js.org/d3.v7.min.js"></script>