react-vis -将x轴记号与条形的开始和结束对齐

Question

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

当前图表

​

​

因此，理想情况下，以10am位置为中心的条形图应该向右移动，以便在10am - 11am之间居中。有没有其他函数可以用来完成这个任务？

Answer 1

在查看了react-vis repo上的所有开放问题后，我能够做到这一点。幸运的是，在我的例子中，总是有一个固定数量的点，所以这个修复是有效的，但是如果你的tick是动态的，你将需要计算移动tick的数量。在我的例子中，总共有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)",
    },
  }}
/>