如何修正不。用d3对条形图中X轴上的蜱进行分析

Question

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

​

​

​

​

​

我想避免这种重叠行为，并设置为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

svg .append("g") .attr("class", "axis x") .attr("transform",转换(0，${height})) .call(xAxis) .selectAll("text") .attr("y", 0) .attr("x", 25) .attr("dy", ".35em") .attr("font-family", "ibm-plex-sans") .attr("transform", "rotate(90)");