问题
I have two arrays of strings: these two arrays contain the labels that are to be inserted on the x and y axis (these labels will be those of a heatmap).
nutsNames corresponds to the x axis (left to right) and the yearsNames corresponds to the y axis (top to bottom).
As the data may vary, I would like to create a way that fits the data.
So the problem is the positioning of the elements on the axes and the svg size.
What I would like to get is something like this:
The image shows two examples of different data. (I don't want to show axes, I put them only to understand what is their direction).
Here is the plunker.
I thought about finding the longest string in nutsNames and multiplying it by a constant (which I don't know how to define) to create the minimum necessary width of the svg.
A similar thing I did it for years.
Obviously the code doesn't work.
回答1:
What you can do is input some dummy numbers for the width,height and margins and let it draw the elements first. Now since all your axis labels are in a g , you can get the width of gs for x and y labels.
The group<g> tag wraps the contents inside it so getting its width/height will automatically give you the width/height of the largest text inside it.
Now you have the width and height of those gs, all that's left is to change the dimensions of the svg accordingly.
Try adding or removing labels in your data. Here's your Plunker
来源：https://stackoverflow.com/questions/50610048/create-the-appropriate-space-for-variable-axis-labels