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

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

以下是我目前掌握的情况：

在图表的

g

包装纸周围提供一些边距并翻译。您定义了边距，但从未使用边距，因此图表会一直延伸到

svg

元素边框，周围没有更多空间

y轴方向使用

.orient（'left'）

，x轴方向使用

.orient（'bottom'）

。看

调整x轴标签的

转换

和

文本定位

（或更改其

g

包装的翻译）

---

这里有一个x轴标签的。

谢谢。在轴上应用方向正确的边距是有效的。不过，有一个问题是，到底有没有办法根据标签文本的长度来计算出标签的边距应该有多大？@spullen有，但这既棘手又难看。例如，您可以在数据数组中找到最长的字符串，将其作为隐藏元素插入svg，然后调用

getComputedTextLength

或

getBBox

或其上的任何函数，计算长度，然后设置边距。谢谢，我将研究这两个函数。