javascript - 如何定义轴上的刻度数？

Question

我是 d3 的新手，使用以下代码在我的图表上创建 x 轴:

export const drawXAxis = (svg, timestamps, chartWidth, chartHeight) => {
    console.log(chartWidth); // 885
    console.log(timestamps.length); // 310
    const xScale = d3.scaleLinear()
        .domain([-1, timestamps.length])
        .range([0, chartWidth]);

    const xBand = d3.scaleBand()
        .domain(
            d3.range(-1, timestamps.length))
                .range([0, chartWidth])
                .padding(0.3);

    const xAxis = d3.axisBottom()
        .scale(xScale)
        .tickFormat(function(d) {
            const ts = moment.utc(timestamps[d]);
            return ts.format('HH') + 'h';
        });

    const gX = svg.append("g")
        .attr("class", "axis x-axis")
        .attr("transform", "translate(0," + chartHeight + ")")
        .call(xAxis);

    return [xScale, xBand, xAxis, gX];
};

据我了解，d3 决定 X 轴上出现的刻度数。
为了更好地控制出现在 X 轴上的值以进行缩放，我想了解 d3 如何确定 - 在这种情况下 - 我有 16 个刻度。
如果我想更均匀地间隔刻度怎么办，例如，我想每 12 或 6 小时看到一个刻度？我的数据每天始终包含 0 -> 23 小时值，但 d3 在我的图表上显示随机小时数。

Answer 1

我将只回答标题中的问题(“轴上的刻度数是如何定义的？”)，而不是您最后提出的问题(”如果我想更均匀地间隔刻度怎么办，例如，我想每 12 或 6 小时看到一个刻度？”)，这是不相关的并且很容易修复(而且，除此之外，它是当然是重复的)。

您的问题需要进行侦探工作。当然，我们的旅程始于d3.axisBottom()。 .如果您查看 source code ，您会看到输入选择中的刻度数...

tick = selection.selectAll(".tick").data(values, scale).order()

...取决于值，即:

var values = tickValues == null ? (scale.ticks ? scale.ticks.apply(scale, tickArguments) : scale.domain()) : tickValues

这一行告诉我们的是，如果 tickValues 为空(没有使用 tickValues)，代码应该使用 scale.ticks具有 ticks 方法(连续)的尺度，我们只是序数尺度的尺度域。

这将我们引向 continuous scales .在那里，使用线性刻度(您正在使用的那个)，我们可以在 source code 处看到scale.ticks 返回这个:

scale.ticks = function(count) {
    var d = domain();
    return ticks(d[0], d[d.length - 1], count == null ? 10 : count);
};

但是，由于 ticks 是从 d3.array 导入的，我们必须 go there查看刻度是如何计算的。此外，由于我们没有将任何内容作为 count 传递，因此 count 默认为 10。

所以，最后，我们到达了at this :

start = Math.ceil(start / step);
stop = Math.floor(stop / step);
ticks = new Array(n = Math.ceil(stop - start + 1));
while (++i < n) ticks[i] = (start + i) * step;

或者这个:

start = Math.floor(start * step);
stop = Math.ceil(stop * step);
ticks = new Array(n = Math.ceil(start - stop + 1));
while (++i < n) ticks[i] = (start - i) / step;

取决于 steps 的值。如果您查看下面的 tickIncrement 函数，您会发现 steps 只能是 1、2、5 或 10(及其负数)。

这就是您需要知道上面变量 ticks 中数组长度的全部内容。根据起始值和终止值(即取决于域)，有时我们有超过 10 个刻度(在您的情况下为 16)，有时我们有少于 10，即使默认计数为 10。看看这里:

const s = d3.scaleLinear();
  
console.log(s.domain([1,12]).ticks().length);
console.log(s.domain([100,240]).ticks().length);
console.log(s.domain([10,10]).ticks().length);
console.log(s.domain([2,10]).ticks().length);
console.log(s.domain([1,4]).ticks().length);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

如您所见，最后一个示例为我们提供了 16 个刻度。