Skip to content

Commit 3bff26f

Browse files
alexcjohnsonalexcjohnson
authored
Merge pull request #2424 from darabos/darabos-multiline-labels
[WIP] Vertically center multi-line labels on Y axis
2 parents 8731cb5 + 99292ee commit 3bff26f

File tree

7 files changed

+189
-0
lines changed

7 files changed

+189
-0
lines changed

Diff for: ‎src/plots/cartesian/axes.js

+28
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ var MINUS_SIGN = constants.MINUS_SIGN;
3232
var BADNUM = constants.BADNUM;
3333

3434
var MID_SHIFT = require('../../constants/alignment').MID_SHIFT;
35+
var LINE_SPACING = require('../../constants/alignment').LINE_SPACING;
3536

3637
var axes = module.exports = {};
3738

@@ -2039,6 +2040,26 @@ axes.doTicks = function(gd, axid, skipTitle) {
20392040
});
20402041
}
20412042

2043+
// How much to shift a multi-line label to center it vertically.
2044+
function getAnchorHeight(lineCount, lineHeight, angle) {
2045+
var h = (lineCount - 1) * lineHeight;
2046+
if(axLetter === 'x') {
2047+
if(angle < -60 || 60 < angle) {
2048+
return -0.5 * h;
2049+
} else if(axside === 'top') {
2050+
return -h;
2051+
}
2052+
} else {
2053+
angle *= axside === 'left' ? 1 : -1;
2054+
if(angle < -30) {
2055+
return -h;
2056+
} else if(angle < 30) {
2057+
return -0.5 * h;
2058+
}
2059+
}
2060+
return 0;
2061+
}
2062+
20422063
function positionLabels(s, angle) {
20432064
s.each(function(d) {
20442065
var anchor = labelanchor(angle, d);
@@ -2049,6 +2070,13 @@ axes.doTicks = function(gd, axid, skipTitle) {
20492070
(' rotate(' + angle + ',' + labelx(d) + ',' +
20502071
(labely(d) - d.fontSize / 2) + ')') :
20512072
'');
2073+
var anchorHeight = getAnchorHeight(
2074+
svgTextUtils.lineCount(thisLabel),
2075+
LINE_SPACING * d.fontSize,
2076+
isNumeric(angle) ? +angle : 0);
2077+
if(anchorHeight) {
2078+
transform += ' translate(0, ' + anchorHeight + ')';
2079+
}
20522080
if(mathjaxGroup.empty()) {
20532081
thisLabel.select('text').attr({
20542082
transform: transform,

Diff for: ‎test/image/baselines/bar_multiline_labels.png

71.2 KB
Loading

Diff for: ‎test/image/baselines/benchmarks.png

-65 Bytes
Loading

Diff for: ‎test/image/baselines/cliponaxis_false-dates-log.png

348 Bytes
Loading

Diff for: ‎test/image/baselines/gl2d_date_axes.png

101 Bytes
Loading

Diff for: ‎test/image/baselines/world-cals.png

423 Bytes
Loading

Diff for: ‎test/image/mocks/bar_multiline_labels.json

+161
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
{
2+
"data":[
3+
{
4+
"type": "bar",
5+
"x":["x 1","multiple<br>lines","one<br >two<BR>three"],
6+
"y":["y 1","multiple<br>lines","one<br >two<BR>three"]
7+
},
8+
{
9+
"type": "bar",
10+
"x":["x 2","multiple<br>lines","one<br>two<br>three"],
11+
"y":["y 2","multiple<br>lines","one<br>two<br>three"],
12+
"xaxis": "x2",
13+
"yaxis": "y2"
14+
},
15+
{
16+
"type": "bar",
17+
"x":["x 3","multiple<br>lines","one<br>two<br>three"],
18+
"y":["y 3","multiple<br>lines","one<br>two<br>three"],
19+
"xaxis": "x3",
20+
"yaxis": "y3"
21+
},
22+
{
23+
"type": "bar",
24+
"x":["x 4","multiple<br>lines","one<br>two<br>three"],
25+
"y":["y 4","multiple<br>lines","one<br>two<br>three"],
26+
"xaxis": "x4",
27+
"yaxis": "y4"
28+
},
29+
{
30+
"type": "bar",
31+
"orientation": "h",
32+
"x":["x 5","multiple<br>lines","one<br>two<br>three"],
33+
"y":["y 5","multiple<br>lines","one<br>two<br>three"],
34+
"xaxis": "x5",
35+
"yaxis": "y5"
36+
},
37+
{
38+
"type": "bar",
39+
"orientation": "h",
40+
"x":["x 6","multiple<br>lines","one<br>two<br>three"],
41+
"y":["y 6","multiple<br>lines","one<br>two<br>three"],
42+
"xaxis": "x6",
43+
"yaxis": "y6"
44+
},
45+
{
46+
"type": "scatter",
47+
"x":["x 7","multiple<br>lines","one<br>two<br>three"],
48+
"y":["y 7","multiple<br>lines","one<br>two<br>three"],
49+
"xaxis": "x7",
50+
"yaxis": "y7"
51+
},
52+
{
53+
"type": "scatter",
54+
"x":["x 8","multiple<br>lines","one<br>two<br>three"],
55+
"y":["y 8","multiple<br>lines","one<br>two<br>three"],
56+
"xaxis": "x8",
57+
"yaxis": "y8"
58+
}
59+
],
60+
"layout":{
61+
"showlegend": false,
62+
"xaxis": {
63+
"ticks": "outside",
64+
"domain": [0, 0.4]
65+
},
66+
"yaxis": {
67+
"ticks": "outside",
68+
"domain": [0, 0.4]
69+
},
70+
"xaxis2": {
71+
"ticks": "outside",
72+
"domain": [0, 0.4],
73+
"side": "top",
74+
"anchor": "y2",
75+
"tickangle": 90
76+
},
77+
"yaxis2": {
78+
"ticks": "outside",
79+
"domain": [0, 0.4],
80+
"side": "right",
81+
"tickangle": 90
82+
},
83+
"xaxis3": {
84+
"ticks": "outside",
85+
"domain": [0.6, 1],
86+
"tickangle": 90
87+
},
88+
"yaxis3": {
89+
"ticks": "outside",
90+
"domain": [0, 0.4],
91+
"anchor": "x3",
92+
"tickangle": 90
93+
},
94+
"xaxis4": {
95+
"ticks": "outside",
96+
"domain": [0.6, 1],
97+
"side": "top"
98+
},
99+
"yaxis4": {
100+
"ticks": "outside",
101+
"domain": [0, 0.4],
102+
"side": "right",
103+
"anchor": "x4"
104+
},
105+
"xaxis5": {
106+
"ticks": "outside",
107+
"domain": [0, 0.4],
108+
"anchor": "y5",
109+
"tickangle": 45
110+
},
111+
"yaxis5": {
112+
"ticks": "outside",
113+
"domain": [0.6, 1],
114+
"anchor": "x5",
115+
"tickangle": 45
116+
},
117+
"xaxis6": {
118+
"ticks": "outside",
119+
"domain": [0, 0.4],
120+
"side": "top",
121+
"anchor": "y6",
122+
"tickangle": -90
123+
},
124+
"yaxis6": {
125+
"ticks": "outside",
126+
"domain": [0.6, 1],
127+
"anchor": "x6",
128+
"side": "right",
129+
"tickangle": -90
130+
},
131+
"xaxis7": {
132+
"ticks": "outside",
133+
"domain": [0.6, 1],
134+
"anchor": "y7",
135+
"tickangle": -90
136+
},
137+
"yaxis7": {
138+
"ticks": "outside",
139+
"domain": [0.6, 1],
140+
"anchor": "x7",
141+
"tickangle": -90
142+
},
143+
"xaxis8": {
144+
"ticks": "outside",
145+
"domain": [0.6, 1],
146+
"side": "top",
147+
"anchor": "y8",
148+
"tickangle": -45
149+
},
150+
"yaxis8": {
151+
"ticks": "outside",
152+
"domain": [0.6, 1],
153+
"side": "right",
154+
"anchor": "x8",
155+
"tickangle": 45
156+
},
157+
"legend": "none",
158+
"height":800,
159+
"width":800
160+
}
161+
}

0 commit comments

Comments
 (0)