如何使軸正確顯示在基於網格的（熱圖）圖表上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。