Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 3bff26f

Browse filesBrowse 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
Copy full SHA for 3bff26f

File tree

Expand file treeCollapse file tree

7 files changed

+189
-0
lines changed
Filter options
Expand file treeCollapse file tree

7 files changed

+189
-0
lines changed

‎src/plots/cartesian/axes.js

Copy file name to clipboardExpand all lines: src/plots/cartesian/axes.js
+28Lines changed: 28 additions & 0 deletions
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,

‎test/image/baselines/bar_multiline_labels.png

Copy file name to clipboard
71.2 KB
Loading

‎test/image/baselines/benchmarks.png

Copy file name to clipboard
-65 Bytes
Loading

‎test/image/baselines/cliponaxis_false-dates-log.png

Copy file name to clipboard
348 Bytes
Loading

‎test/image/baselines/gl2d_date_axes.png

Copy file name to clipboard
101 Bytes
Loading

‎test/image/baselines/world-cals.png

Copy file name to clipboard
423 Bytes
Loading

‎test/image/mocks/bar_multiline_labels.json

Copy file name to clipboard
+161Lines changed: 161 additions & 0 deletions
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 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.