javascript - 如何使用 d3 让轴在基于网格(热图)的图表上正确显示

Question

我正在尝试显示基于网格的图表(热图)的轴以正确显示。我可以让它们正确对齐(以每个网格为中心，无论是行还是列)，但它们位于网格的顶部，我希望它们显示在网格之外。

这是我到目前为止所拥有的:http://jsbin.com/hihepo/8

Answer 1

1. 在图表的 g 包装周围提供一些边距并翻译。您定义了边距，但从未使用过它们，因此您将图表拉伸(stretch)到 svg 元素边框并且周围不再有空间。
2. 使用 .orient('left') 表示 y 轴方向，使用 .orient('bottom') 表示 x 轴方向。请参阅docs for orient method .
3. 调整 x 轴标签的 transform 和 text-anchor(或更改其 g 包装器的翻译)。

这是一个 demo 用于 x 轴标签。