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

Question

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

到目前为止我所拥有的内容：http://jsbin.com/hihepo/8

Answer 1

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

这是x轴标签的 demo 。