React+D3热力图问题：基于现有属性绘制，消除空白及坐标轴异常

问题背景 #

我目前正在基于外部JSON数据，使用React结合D3绘制一张展示taxIDs与KeywordNames关系的热力图。现在已经能成功渲染出对应spectracount数值，但图表里存在大量空白区域，不知道怎么利用现有数据把这些空白填满。

遇到的具体问题 #

• 我想让X轴显示所有taxIDs，但尝试使用rangeBands()函数时始终报错；
• Y轴需要展示所有KeywordNames，用类似的坐标轴刻度设置逻辑也遇到了相同的问题；
• 图表存在大量未被利用的空白区域，无法将所有数据对应填充到热力图的单元格中。

期望效果 #

我希望最终的热力图能实现：

• X轴完整展示所有taxIDs
• Y轴完整展示所有KeywordNames
• 每个单元格精准对应并绘制出对应的spectracount数值
• 整体效果趋近于紧密排列的经典热力图样式（无多余空白，单元格铺满有效数据区域）

恳请各位帮忙排查下问题，看看是坐标轴刻度计算逻辑哪里出了问题，还是数据映射的环节需要调整？感谢大家的支持！

内容的提问来源于stack exchange，提问作者neeru neeraja