为变量轴标签创建适当的空间

Question

我有两个字符串数组：这两个数组包含要插入x和y轴的标签（这些标签将是热图的标签）。 nutsNames对应x轴（从左到右），yearsNames对应y轴（从上到下）。

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

我想得到的是这样的：

该图显示了两个不同数据的示例。 （我不想展示轴，我只是想了解它们的方向）。

这是plunker。

我想在nutsNames找到最长的字符串并将其乘以常量（我不知道如何定义）来创建svg的最小必要宽度。

我做了多年的类似事情。

显然代码不起作用。

Answer 1

您可以为width，height和margins输入一些虚拟数字，并让它先绘制元素。现在，由于您的所有轴标签都位于g，因此width和g标签可以获得x y个。{/ p>

group<g>标记将内容包装在其中，因此获取width/height标记会自动为其提供width/height内的最大text。

现在您拥有width的{​​{1}}和height个，剩下的就是相应地更改g的尺寸。

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