如何使用 d3 在基于网格（热图）的图表上正确显示轴

Question

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

这是我目前的情况：http://jsbin.com/hihepo/8

Answer 1

1. 提供一些边距和 translate 图表的 g 包装器。您定义了边距，但从未使用过，因此图表一直延伸到 svg 个元素边界，并且周围没有更多 space。
2. 对 y 轴使用 .orient('left')，对 x 轴方向使用 .orient('bottom')。参见 docs for orient method。
3. 调整 x 轴标签的 transform 和 text-anchor（或更改其 g 包装器的翻译）。

这是 x 轴标签的 demo。