Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 8f8876c

Browse files
darabosdarabos
committed
Fix multi-line alignment in different angles and sides.
1 parent b682fe3 commit 8f8876c

File tree

2 files changed

+161
-9
lines changed

2 files changed

+161
-9
lines changed

‎src/plots/cartesian/axes.js

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1870,9 +1870,7 @@ axes.doTicks = function(gd, axid, skipTitle) {
18701870
else if(axLetter === 'y') {
18711871
sides = ['left', 'right'];
18721872
transfn = ax._transfn || function(d) {
1873-
var multilineCorrection = d.text ?
1874-
-0.5 * (d.text.split('<br>').length - 1) * LINE_SPACING * d.fontSize : 0;
1875-
return 'translate(0,' + (ax._offset + ax.l2p(d.x) + multilineCorrection) + ')';
1873+
return 'translate(0,' + (ax._offset + ax.l2p(d.x)) + ')';
18761874
};
18771875
tickpathfn = function(shift, len) {
18781876
if(ax._counterangle) {
@@ -2049,6 +2047,23 @@ axes.doTicks = function(gd, axid, skipTitle) {
20492047
(' rotate(' + angle + ',' + labelx(d) + ',' +
20502048
(labely(d) - d.fontSize / 2) + ')') :
20512049
'');
2050+
var extraHeight = d.text ?
2051+
(d.text.split('<br>').length - 1) * LINE_SPACING * d.fontSize : 0;
2052+
if (axLetter === 'x') {
2053+
if (angle < -20 || 20 < angle) {
2054+
transform += ' translate(0, ' + (-0.5 * extraHeight) + ')';
2055+
} else if (axside === 'top') {
2056+
transform += ' translate(0, ' + (-extraHeight) + ')';
2057+
}
2058+
} else {
2059+
var textAngle = isNumeric(angle) ? +angle : 0;
2060+
textAngle *= axside === 'left' ? 1 : -1;
2061+
if (textAngle < -20) {
2062+
transform += ' translate(0, ' + (-extraHeight) + ')';
2063+
} else if (textAngle < 20) {
2064+
transform += ' translate(0, ' + (-0.5 * extraHeight) + ')';
2065+
}
2066+
}
20522067
if(mathjaxGroup.empty()) {
20532068
thisLabel.select('text').attr({
20542069
transform: transform,

‎test/image/mocks/bar_multiline_labels.json

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

0 commit comments

Comments
 (0)