D3.js 没有周末的折线图

Question

我是 D3.js 的新手，正在从事一个学校项目。我的任务是根据以下格式的数据生成折线图：

[
{"date":"2023-12-01", "value":99.6},
{"date":"2023-12-04", "value":99.3},
{"date":"2023-12-05", "value":99.2},
{"date":"2023-12-06", "value":99.14},
...
]

每个数据点由单个日期和单个值组成。 数据集中不存在与周末相对应的日期，因为它是财务数据。

我尝试的第一件事是执行scaleTime()，但这导致周末出现在我的X轴上。

我尝试的下一件事是像这样的scaleBand()：

const x = d3.scaleBand().domain(data.map(d => d.date)).range([0, width])

const line = d3.line()
    .x(d => x(d[0]) as number)
    .y(d => y(d[1]))

然而，这对我来说产生了一个奇怪的垂直线结果。 X 轴上没有显示周末，但实际的线条看起来很疯狂！

我非常想弄清楚这一点。新手将不胜感激任何人的建议！

Answer 1

如果我理解正确的话，您希望有一个 X 轴，它显示每个提到的日期的 Y 值。

这里有多个选项：

使用时间刻度

将缺失的周末天数填入数据集中，其值与周五的值相同。因此周末仍然可见，只显示周五的价值。这很容易实现。您还可以将周末设置为空值并在周末打破界限。

使用线性比例

使用数组的索引范围作为x域。例如0 到 19。为此，请确保数组按 ASC 排序并包含该范围内的所有日期。例如如果您的数据集中缺少日期 2023-12-05，则 x 轴上的比例将直接从 2023-12-04 变为 2023-12-06。

用数据集的日期覆盖 x 轴的刻度标签。

这是一篇如何操作刻度标签的好文章：https://ghenshaw-work.medium.com/customizing-axes-in-d3-js-99d58863738b