From f0462c50b429b4e6481116fea01eb5bb663fc908 Mon Sep 17 00:00:00 2001 From: Vijith Assar Date: Wed, 29 May 2024 11:43:57 -0400 Subject: [PATCH] fix(core): center x axis label MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Somewhere along the way this position logic became more convoluted than it needs to be. The result was an x axis text label that is sometimes positioned slightly off-center relative to the mark content. This is visible when the number of axis ticks or nominal bands on the axis is both small and odd – it's easy to see that there's a disagreement about what constitutes the "center" when there are only three bars, for example. The underlying cause for this is an accidental philosophical disagreement about what dimensions should mean. The original Vega Lite renderer uses them to define the dimensions of the marks area, and adds extra things like axes or titles on top of that. In contrast, bisonica has always interpreted dimensions instructions as describing the outer bounds of the node, the total size of the chart. One could argue that this is an incompatibility between the two renderers, but it may also be fair to say that bisonica chose the interpretation that is more useful in the real world. --- source/axes.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/source/axes.js b/source/axes.js index 98f3ebe2..9ceebba9 100644 --- a/source/axes.js +++ b/source/axes.js @@ -16,7 +16,7 @@ import { feature } from './feature.js' import { layerMatch } from './views.js' import { parseScales } from './scales.js' import { renderStyles } from './styles.js' -import { margin, tickMargin } from './position.js' +import { tickMargin } from './position.js' import { timeMethod, timePeriod } from './time.js' import { axisDescription } from './descriptions.js' @@ -248,11 +248,9 @@ const axisTitleX = (s, dimensions) => { } return selection => { const xTitle = selection.append('text').attr('class', 'title') - const bar = feature(s).isBar() ? barWidth(s, dimensions) : 0 - xTitle .attr('x', () => { - return (dimensions.x - margin(s, dimensions).left + bar) * 0.5 + return dimensions.x * 0.5 }) .attr('y', () => { const axisHeight = selection.node().getBBox().height * 2