如何解决d3在条形图中X轴上的刻度线数？

Question

我有一个条形图，它以1单位的间隔（即1小时或1天）在X轴上显示时间。当X轴域增大时，它变得混乱并且重叠。 P.s.附加快照

我想避免这种重叠行为，并且将刻度设置为5（无论域如何）。 我的代码- https://codesandbox.io/s/mq922ymkpy

Answer 1

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)
  );

Answer 2

private void myComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e) { myComboBox.SelectedIndex = -1; } 翻译（0，$ {height}）svg .append("g") .attr("class", "axis x") .attr("transform",