Reactjs 如何使用d3在条形图中确定X轴上的刻度数？

我有一个条形图，显示X轴上的时间间隔为1个单位（即1小时或1天）。当X轴域增长时，它变得杂乱和重叠。附后的快照

我希望避免这种重叠行为，并将ticks设置为5，而不管域是什么。 我的代码-

---

d3

ticks

被认为是一个“提示”-而不是一个上限，事实上会根据域的不同而变化。如果要完全强制执行刻度，应使用

tickValues

和一些逻辑，从所需位置的数据中获取N个值

例如：

const indicesBetweenPoints = Math.round(this.props.data.length / 5)
const xAxis = d3
  .axisBottom(x)
  .tickFormat(timeFormat)
  .tickValues(
    this.props.data.map((d, i) =>
      i % indicesBetweenPoints == 0 ? d[this.props.xAxis] : undefined).filter(item => item)
  );

---

d3

ticks

被认为是一个“提示”-而不是上限，事实上会根据域的不同而变化。如果要完全强制执行刻度，应使用

tickValues

和一些逻辑，从所需位置的数据中获取N个值

例如：

const indicesBetweenPoints = Math.round(this.props.data.length / 5)
const xAxis = d3
  .axisBottom(x)
  .tickFormat(timeFormat)
  .tickValues(
    this.props.data.map((d, i) =>
      i % indicesBetweenPoints == 0 ? d[this.props.xAxis] : undefined).filter(item => item)
  );

svg
.附加（“g”）
.attr（“类”、“x轴”）
.attr（“transform”，

translate（0，${height}）

）
.呼叫（xAxis）
.selectAll（“文本”）
.attr（“y”，0）
.attr（“x”，25）
.attr（“dy”，“.35em”）
.attr（“字体系列”、“ibm plex SAN”）
.attr（“变换”、“旋转（90）”）
svg
.附加（“g”）
.attr（“类”、“x轴”）
.attr（“transform”，
translate（0，${height}）
）
.呼叫（xAxis）
.selectAll（“文本”）
.attr（“y”，0）
.attr（“x”，25）
.attr（“dy”，“.35em”）
.attr（“字体系列”、“ibm plex SAN”）
.attr（“变换”、“旋转（90）”）
它工作得很好。非常感谢。所以除以5意味着我们需要5的倍数？请解释一下。除以5意味着我们最多得5分。如果我们有50个项目，那么我们除以点数（5）-我们得到10的结果，这意味着对于TickValue，我们需要从数据集中每10个项目取一个值。它工作得很好。非常感谢。所以除以5意味着我们需要5的倍数？请解释一下。除以5意味着我们最多得5分。如果我们有50个项目，然后除以点数（5）-我们得到10的结果，这意味着对于TickValue，我们需要从数据集中每隔10个项目取一个值。我尝试了这个。对于该数据集，它可以正常工作，但当间隔为一年或更长时间时，X轴会变得杂乱无章。谢谢，我试过了。对于该数据集，它可以正常工作，但当间隔为一年或更长时间时，X轴会变得杂乱无章。无论如何谢谢你