reactjs - react-vis - 将 x 轴刻度与条形的开始和结束对齐

Question

我正在尝试移动 x 轴刻度，以便它们与每个条形矩形对齐。这个想法是条形对应于 x - y 小时之间的事件，并且刻度有点误导。我试过使用tickFormat()，但这似乎只影响标签。我还浏览了 D3 文档，因为 react-vis 文档提到了很多。

当前图表

因此，理想情况下，位于上午 10 点位置中心的条将向右移动，使其位于上午 10 点至上午 11 点之间。我可以使用其他功能来完成此操作吗？

Answer 1

在查看了 react-vis repo 上的所有未解决问题后，我能够做到这一点。幸运的是，在我的情况下，总是会有一定数量的点，所以这个修复会起作用，但如果你的刻度是动态的，你需要计算移动刻度的数量。在我的例子中，总共有 24 个刻度，图表的宽度是962px这样的，每个刻度相隔大约 40 像素。要将每个刻度移动一半，将 x 位置平移每个刻度之间宽度的一半（减去 1 以说明刻度线本身的 1px 宽度）。还必须将文本向下移动，因为一旦我弄乱了变换，它就会清除库添加的现有变换。不是最好的，但希望这对将来的人有所帮助。

.rv-xy-plot__axis__tick {
  line {
    transform: translate(-19px, 0);
  }
  text {
    transform: translate(-19px, 14px);
  }
}

Answer 2

使用上面@Justin 的回答，我可以transform像这样轻推我的 XAxis 标签：

<XAxis
  tickLabelAngle={-45}
  style={{
    text: {
      stroke: "none",
      fill: "#FF0000",
      fontSize: 10,
      fontWeight: 100,
      transform: "translate(10px, 0)",
    },
  }}
/>