daspect sets the default height

Author: Fil

README.md

@@ -201,7 +201,7 @@ Quantitative scales can be further customized with additional options:
 
 Clamping is typically used in conjunction with setting an explicit domain since if the domain is inferred, no values will be outside the domain. Clamping is useful for focusing on a subset of the data while ensuring that extreme values remain visible, but use caution: clamped values may need an annotation to avoid misinterpretation. Top-level **clamp** and **nice** options are supported as shorthand for setting *scale*.clamp and *scale*.nice on all scales.
 
-The top-level **daspect** option, if specified, sets the data aspect ratio between the *x* and *y* scale; if set to 1, the range of one of the scales will be adjusted so that a variation of 1 unit in the *x* dimension corresponds to the same number of pixels as a variation of 1 unit in the *y* dimension.
+The top-level **daspect** option, if specified, computes a default height such that a variation of 1 unit in the *x* dimension roughly corresponds to the same number of pixels as a variation of *daspect* unit in the *y* dimension. Note: for an exact data aspect ratio, set *fx* and *fy*’s round option to false.
 
 The *scale*.**transform** option allows you to apply a function to all values before they are passed through the scale. This is convenient for transforming a scale’s data, say to convert to thousands or between temperature units.
 

src/dimensions.js

@@ -27,9 +27,9 @@ export function Dimensions(
     marginLeft = margin !== undefined ? margin : Math.max((yAxis === "left" ? 40 : 0) + facetMarginLeft, xAxis || fxAxis ? 20 : 0.5 - offset)
   } = {}
 ) {
-  const dims = {
+  return {
     width,
-    height,
+    height: height !== undefined ? height : autoHeight(scales, {width, marginLeft, marginRight, marginTop, marginBottom}, daspect),
     marginTop,
     marginRight,
     marginBottom,
@@ -39,23 +39,18 @@ export function Dimensions(
     facetMarginBottom,
     facetMarginLeft
   };
-  if (height === undefined) height = autoHeight(scales, dims, daspect);
-  return {...dims, height};
 }
 
-function diff([a, b]) { return Math.abs(b - a); }
-
 function autoHeight({x, y, fy, fx}, {width, marginLeft, marginRight, marginTop, marginBottom}, daspect) {
   const nfy = fy ? fy.scale.domain().length : 1;
   const ny = y ? (isOrdinalScale(y) ? y.scale.domain().length : Math.max(7, 17 / nfy)) : 1;
 
-  // If a data aspect ratio is given, tweak the height to match;
-  // but first disentangle the facets' dimensions…
-  if (daspect != null) {
-    console.warn({daspect, xd: x.domain, yd: y.domain});
-    const ratio = Math.abs(diff(y.domain) / diff(x.domain)) / daspect;
-    const trueWidth = width - marginLeft - marginRight;
-    return ratio * trueWidth + marginTop + marginBottom;
+  // If a data aspect ratio is given, tweak the height to match
+  if (daspect != null && daspect !== false) {
+    if (!(isFinite(daspect) && daspect > 0)) throw new Error(`invalid data aspect ratio: ${daspect}`);
+    const ratio = Math.abs((y.domain[1] - y.domain[0]) / (x.domain[1] - x.domain[0]) / daspect);
+    const trueWidth = (fx ? fx.scale.bandwidth() : 1) * (width - marginLeft - marginRight);
+    return (ratio * trueWidth) / (fy ? fy.scale.bandwidth() : 1) + marginTop + marginBottom;
   }
 
   return !!(y || fy) * Math.max(1, Math.min(60, ny * nfy)) * 20 + !!fx * 30 + 60;

src/plot.js

@@ -11,7 +11,7 @@ import {basic} from "./transforms/basic.js";
 import {consumeWarnings} from "./warnings.js";
 
 export function plot(options = {}) {
-  const {facet, style, caption, ariaLabel, ariaDescription, daspect} = options;
+  const {facet, style, caption, ariaLabel, ariaDescription} = options;
 
   // className for inline styles
   const className = maybeClassName(options.className);
@@ -87,7 +87,7 @@ export function plot(options = {}) {
   const axes = Axes(scaleDescriptors, options);
   const dimensions = Dimensions(scaleDescriptors, axes, options);
 
-  autoScaleRange(scaleDescriptors, dimensions, daspect);
+  autoScaleRange(scaleDescriptors, dimensions);
   autoScaleLabels(channelsByScale, scaleDescriptors, axes, dimensions, options);
   autoAxisTicks(scaleDescriptors, axes);
 

src/scales.js

@@ -67,34 +67,11 @@ export function ScaleFunctions(scales) {
 }
 
 // Mutates scale.range!
-export function autoScaleRange({x, y, fx, fy}, dimensions, daspect) {
+export function autoScaleRange({x, y, fx, fy}, dimensions) {
   if (fx) autoScaleRangeX(fx, dimensions);
   if (fy) autoScaleRangeY(fy, dimensions);
   if (x) autoScaleRangeX(x, fx ? {width: fx.scale.bandwidth()} : dimensions);
   if (y) autoScaleRangeY(y, fy ? {height: fy.scale.bandwidth()} : dimensions);
-  if (daspect != null) {
-    if (+daspect <= 0) throw new Error(`invalid daspect: ${daspect}`);
-    if (x?.type !== "linear" || x.domain.length !== 2 || y?.type !== "linear" || y.domain.length !== 2) {
-      throw new Error("Only simple linear scales can use a data aspect ratio");
-    }
-    const drx = x.range[1] - x.range[0];
-    const ddx = x.domain[1] - x.domain[0];
-    const dry = y.range[1] - y.range[0];
-    const ddy = y.domain[1] - y.domain[0];
-    const d = Math.abs(+daspect * drx / dry * ddy / ddx);
-    if (d > 1) {
-      const delta = drx * (1 - 1 / d) / 2;
-      x.range[0] += delta;
-      x.range[1] -= delta;
-      x.scale.range(x.range);
-    }
-    else if (d < 1) {
-      const delta = dry * (1 - d) / 2;
-      y.range[0] += delta;
-      y.range[1] -= delta;
-      y.scale.range(y.range);
-    }
-  }
 }
 
 function autoScaleRangeX(scale, dimensions) {