Skip to content

Commit ba8d941

Browse files
archmojarchmoj
authored
Merge pull request #4469 from plotly/treemap-textanchor
Improve text fit in treemap trace
2 parents ec2a31e + 7098a97 commit ba8d941

22 files changed

+363
-39
lines changed

Diff for: ‎src/traces/bar/plot.js

+11-2
Original file line numberDiff line numberDiff line change
@@ -442,6 +442,9 @@ function toMoveInsideBar(x0, x1, y0, y1, textBB, opts) {
442442
var anchor = opts.anchor || 'end';
443443
var isEnd = anchor === 'end';
444444
var isStart = anchor === 'start';
445+
var leftToRight = opts.leftToRight || 0; // left: -1, center: 0, right: 1
446+
var toRight = (leftToRight + 1) / 2;
447+
var toLeft = 1 - toRight;
445448

446449
var textWidth = textBB.width;
447450
var textHeight = textBB.height;
@@ -479,9 +482,15 @@ function toMoveInsideBar(x0, x1, y0, y1, textBB, opts) {
479482
}
480483

481484
// compute text and target positions
482-
var textX = (textBB.left + textBB.right) / 2;
485+
var textX = (
486+
textBB.left * toLeft +
487+
textBB.right * toRight
488+
);
483489
var textY = (textBB.top + textBB.bottom) / 2;
484-
var targetX = (x0 + x1) / 2;
490+
var targetX = (
491+
(x0 + TEXTPAD) * toLeft +
492+
(x1 - TEXTPAD) * toRight
493+
);
485494
var targetY = (y0 + y1) / 2;
486495
var anchorX = 0;
487496
var anchorY = 0;

Diff for: ‎src/traces/treemap/plot.js

+31-36
Original file line numberDiff line numberDiff line change
@@ -299,16 +299,6 @@ function plotOne(gd, cd, element, transitionOpts) {
299299
var y1 = pt.y1;
300300
var textBB = pt.textBB;
301301

302-
if(x0 === x1) {
303-
x0 -= TEXTPAD;
304-
x1 += TEXTPAD;
305-
}
306-
307-
if(y0 === y1) {
308-
y0 -= TEXTPAD;
309-
y1 += TEXTPAD;
310-
}
311-
312302
var hasFlag = function(f) { return trace.textposition.indexOf(f) !== -1; };
313303

314304
var hasBottom = hasFlag('bottom');
@@ -321,23 +311,18 @@ function plotOne(gd, cd, element, transitionOpts) {
321311
var hasRight = hasFlag('right');
322312
var hasLeft = hasFlag('left') || opts.onPathbar;
323313

324-
var offsetDir =
325-
hasLeft ? 'left' :
326-
hasRight ? 'right' : 'center';
327-
328-
if(opts.onPathbar || !opts.isHeader) {
329-
x0 += hasLeft ? TEXTPAD : 0;
330-
x1 -= hasRight ? TEXTPAD : 0;
331-
}
314+
var leftToRight =
315+
hasLeft ? -1 :
316+
hasRight ? 1 : 0;
332317

333318
var pad = trace.marker.pad;
334319
if(opts.isHeader) {
335320
x0 += pad.l - TEXTPAD;
336321
x1 -= pad.r - TEXTPAD;
337322
if(x0 >= x1) {
338323
var mid = (x0 + x1) / 2;
339-
x0 = mid - TEXTPAD;
340-
x1 = mid + TEXTPAD;
324+
x0 = mid;
325+
x1 = mid;
341326
}
342327

343328
// limit the drawing area for headers
@@ -356,33 +341,29 @@ function plotOne(gd, cd, element, transitionOpts) {
356341
isHorizontal: false,
357342
constrained: true,
358343
angle: 0,
359-
anchor: anchor
344+
anchor: anchor,
345+
leftToRight: leftToRight
360346
});
361347
transform.fontSize = opts.fontSize;
362348

363-
if(offsetDir !== 'center') {
364-
var deltaX = (x1 - x0) / 2 - transform.scale * (textBB.right - textBB.left) / 2;
365-
if(opts.isHeader) deltaX -= TEXTPAD;
366-
367-
if(offsetDir === 'left') transform.targetX -= deltaX;
368-
else if(offsetDir === 'right') transform.targetX += deltaX;
369-
}
370-
371-
transform.targetX = viewMapX(transform.targetX - transform.anchorX * transform.scale);
372-
transform.targetY = viewMapY(transform.targetY - transform.anchorY * transform.scale);
373-
transform.anchorX = 0;
374-
transform.anchorY = 0;
349+
transform.targetX = viewMapX(transform.targetX);
350+
transform.targetY = viewMapY(transform.targetY);
375351

376352
if(isNaN(transform.targetX) || isNaN(transform.targetY)) {
377353
return {};
378354
}
379355

380-
recordMinTextSize(trace.type, transform, fullLayout);
356+
if(x0 !== x1 && y0 !== y1) {
357+
recordMinTextSize(trace.type, transform, fullLayout);
358+
}
359+
381360
return {
382361
scale: transform.scale,
383362
rotate: transform.rotate,
384363
textX: transform.textX,
385364
textY: transform.textY,
365+
anchorX: transform.anchorX,
366+
anchorY: transform.anchorY,
386367
targetX: transform.targetX,
387368
targetY: transform.targetY
388369
};
@@ -495,13 +476,18 @@ function plotOne(gd, cd, element, transitionOpts) {
495476
}
496477

497478
var transform = pt.transform;
498-
recordMinTextSize(trace.type, transform, fullLayout);
479+
if(pt.x0 !== pt.x1 && pt.y0 !== pt.y1) {
480+
recordMinTextSize(trace.type, transform, fullLayout);
481+
}
482+
499483
return d3.interpolate(prev, {
500484
transform: {
501485
scale: transform.scale,
502486
rotate: transform.rotate,
503487
textX: transform.textX,
504488
textY: transform.textY,
489+
anchorX: transform.anchorX,
490+
anchorY: transform.anchorY,
505491
targetX: transform.targetX,
506492
targetY: transform.targetY
507493
}
@@ -534,11 +520,16 @@ function plotOne(gd, cd, element, transitionOpts) {
534520

535521
var strTransform = function(d) {
536522
var transform = d.transform;
537-
recordMinTextSize(trace.type, transform, fullLayout);
523+
524+
if(d.x0 !== d.x1 && d.y0 !== d.y1) {
525+
recordMinTextSize(trace.type, transform, fullLayout);
526+
}
538527

539528
return Lib.getTextTransform({
540529
textX: transform.textX,
541530
textY: transform.textY,
531+
anchorX: transform.anchorX,
532+
anchorY: transform.anchorY,
542533
targetX: transform.targetX,
543534
targetY: transform.targetY,
544535
scale: transform.scale,
@@ -561,6 +552,8 @@ function plotOne(gd, cd, element, transitionOpts) {
561552
prevLookupPathbar[getKey(pt)].transform = {
562553
textX: pt.transform.textX,
563554
textY: pt.transform.textY,
555+
anchorX: pt.transform.anchorX,
556+
anchorY: pt.transform.anchorY,
564557
targetX: pt.transform.targetX,
565558
targetY: pt.transform.targetY,
566559
scale: pt.transform.scale,
@@ -581,6 +574,8 @@ function plotOne(gd, cd, element, transitionOpts) {
581574
prevLookupSlices[getKey(pt)].transform = {
582575
textX: pt.transform.textX,
583576
textY: pt.transform.textY,
577+
anchorX: pt.transform.anchorX,
578+
anchorY: pt.transform.anchorY,
584579
targetX: pt.transform.targetX,
585580
targetY: pt.transform.targetY,
586581
scale: pt.transform.scale,

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

3.37 KB
Loading

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

4.18 KB
Loading

Diff for: ‎test/image/baselines/treemap_level-depth.png

1.12 KB
Loading

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

475 Bytes
Loading

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

9.18 KB
Loading

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

397 Bytes
Loading

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

1.19 KB
Loading

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

1.33 KB
Loading

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

2.63 KB
Loading

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

4.87 KB
Loading

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

3.95 KB
Loading

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

536 Bytes
Loading

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

135 Bytes
Loading

Diff for: ‎test/image/baselines/treemap_with-without_values.png

3.81 KB
Loading

Diff for: ‎test/image/baselines/treemap_with-without_values_template.png

5.2 KB
Loading

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

-73 Bytes
Loading

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

-22 Bytes
Loading

Diff for: ‎test/image/baselines/uniformtext_treemap_coffee-maxdepth3.png

32 KB
Loading

0 commit comments

Comments
 (0)