d3.js - D3.js：我可以从刻度线偏移刻度标签吗？

Question

我在 D3.js 中工作，我想绘制一个刻度线偏移刻度线的轴。

图片可能是解释这一点的最佳方式：

因此，白色刻度线与 Jan/Feb/Mar 刻度标签的位置不同，而是沿 x 轴偏移。

我目前正在为 x 轴使用序数系列，并传入一组显式tickValues.

我看不到任何方法可以从D3 轴文档中的刻度标签中偏移刻度线。我应该简单地手动绘制刻度吗？

Answer 1

这确实不受直接支持，但您确实有几个选择。

• 您可以有两个不同的轴，一个用于刻度，一个用于标签。
• 您可以使用主要和次要刻度来破解它。请参阅此问题的第一个答案。
• 您可以明确选择标签并偏移它们。请参阅同一问题的其他答案或此邮件列表线程。

根据您想要做什么，一种解决方案可能比其他解决方案更好。特别是，您需要考虑是否希望所有这些都动态更新。

Answer 2

您可能要考虑使用D3FC，它可以直接替换支持此功能的 D3 轴组件。

使用 D3FC，您可以将 D3 轴换成 D3FC 序数轴，如下所示：

const axis = fc.axisOrdinalBottom(scale);

D3FC 序数轴在每个条的中心呈现标签，以及中间的刻度，如下所示：

全面披露——我是 D3FC 项目的维护者和积极贡献者。