d3.js – 为变量轴标签创建适当的空间

我有两个字符串数组:这两个数组包含要插入x和y轴的标签(这些标签将是热图的标签).

nutsNames对应于x轴(从左到右),yearsNames对应于y轴(从上到下).

由于数据可能会有所不同,我想创建一种适合数据的方法.
所以问题是轴上元素的定位和svg大小.

我想得到的是这样的:

《d3.js – 为变量轴标签创建适当的空间》

该图显示了两个不同数据的示例.
(我不想展示轴,我只是想了解它们的方向).

这是plunker.

我想在nutsNames中找到最长的字符串并将它乘以一个常量(我不知道如何定义)来创建svg的最小必要宽度.

类似的事情,我多年来一直这样做.

显然代码不起作用.

最佳答案 你可以做的是为宽度,高度和边距输入一些虚拟数字,然后让它首先绘制元素.现在,由于所有轴标签都是g,因此可以获得x和y标签的gs宽度.

组< g>标签包含其中的内容,因此获取其宽度/高度将自动为您提供其中最大文本的宽度/高度.

现在你有了这些gs的宽度和高度,剩下的就是相应地改变svg的尺寸.

尝试在数据中添加或删除标签.这是你的Plunker

点赞