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

How to get axis to display correctly on grid based (heat map) chart with d3

本文关键字：显示 热图 于网格 何使用 网格 d3      更新时间：2023-09-26

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

以下是我目前所掌握的：http://jsbin.com/hihepo/8

  1. 在图表的g包装器周围提供一些边距和translate。您已经定义了边距，但它们从未使用过，所以您绘制的图表一直延伸到svg元素边界，周围没有更多的空间
  2. 将.orient('left')用于y轴，将.orient('bottom')用于x轴方向。orient方法见文档
  3. 调整x轴标签的transform和text-anchor（或更改其g包装的翻译）

以下是x轴标签的演示。

相关文章：