fix: avoid double application of a scale transform (#1645)

* avoid double application of a scale transform when using a derived mark (such as a tip)

* transform instead of transformed

---------

Co-authored-by: Mike Bostock <[email protected]>

Author: Fil

src/channel.d.ts

@@ -109,6 +109,9 @@ export interface Channel {
    */
   filter?: ((value: any) => boolean) | null;
 
+  /** Whether to apply the scale’s transform, if any; defaults to true. */
+  transform?: boolean;
+
   /**
    * An internal hint to affect the default construction of scales. For example,
    * the dot mark uses a channel hint to affect the default range of the

src/plot.js

@@ -385,17 +385,20 @@ function applyScaleTransforms(channels, options) {
   return channels;
 }
 
-// Note: mutates channel.value to apply the scale transform, if any.
+// Note: mutates channel.value to apply the scale transform, if any. Also sets
+// channel.transform to false to prevent duplicate transform application.
 function applyScaleTransform(channel, options) {
-  const {scale} = channel;
-  if (scale == null) return;
+  const {scale, transform: t = true} = channel;
+  if (scale == null || !t) return;
   const {
     type,
     percent,
     interval,
     transform = percent ? (x) => x * 100 : maybeIntervalTransform(interval, type)
   } = options[scale] ?? {};
-  if (transform != null) channel.value = map(channel.value, transform);
+  if (transform == null) return;
+  channel.value = map(channel.value, transform);
+  channel.transform = false;
 }
 
 // An initializer may generate channels without knowing how the downstream mark

test/output/tipTransform.html

@@ -0,0 +1,75 @@
+<figure style="max-width: initial;"><svg class="plot-ramp" font-family="system-ui, sans-serif" font-size="10" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <style>
+      .plot-ramp {
+        display: block;
+        background: white;
+        height: auto;
+        height: intrinsic;
+        max-width: 100%;
+        overflow: visible;
+      }
+
+      .plot-ramp text {
+        white-space: pre;
+      }
+    </style>
+    <image x="0" y="18" width="240" height="10" preserveAspectRatio="none" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAABCAYAAAAxWXB3AAAABmJLR0QA/wD/AP+gvaeTAAABH0lEQVQ4jX2QQW4bUQxDn6hJ6sTtuosse/8jSuzi64/HblADAvlIDjDj+PP7y0f+4tCdQz9J3Tnyk9Qd6YPMT6QPlDekG5E3QjeUP4h8B43mO6E3yDm9QR44D9CBM4cTS0tTOAUpWsIZkwVW4ARn0BlYDDPedILlyT1+a5+MevKG7KWzQeusWv7M6uziGx9RxOxCRUQ/qU4uNHtFo9lo83dKk5csWT53TpPDYvW7S17OTeJ/2Zv90OkOb57s9Bduo531o1c/WBddf+32Rn7mKM6d2kQbFUsbokw00Ib6j5ahrzr+dfPEL88Nd4F79GTo8rrTQ8/umtepq6teXZXpnr5N1cW316uM757nPBt7vfZk7Z0t7/mM7c3lDMTy+/cXwM9vrI9SuXIAAAAASUVORK5CYII="></image>
+    <g transform="translate(0,28)" fill="none" text-anchor="middle" font-variant="tabular-nums">
+      <g class="tick" opacity="1" transform="translate(0.5,0)">
+        <line stroke="currentColor" y2="6" y1="-10"></line>
+        <text fill="currentColor" y="9" dy="0.71em">0</text>
+      </g>
+      <g class="tick" opacity="1" transform="translate(48.5,0)">
+        <line stroke="currentColor" y2="6" y1="-10"></line>
+        <text fill="currentColor" y="9" dy="0.71em">20</text>
+      </g>
+      <g class="tick" opacity="1" transform="translate(96.5,0)">
+        <line stroke="currentColor" y2="6" y1="-10"></line>
+        <text fill="currentColor" y="9" dy="0.71em">40</text>
+      </g>
+      <g class="tick" opacity="1" transform="translate(144.5,0)">
+        <line stroke="currentColor" y2="6" y1="-10"></line>
+        <text fill="currentColor" y="9" dy="0.71em">60</text>
+      </g>
+      <g class="tick" opacity="1" transform="translate(192.5,0)">
+        <line stroke="currentColor" y2="6" y1="-10"></line>
+        <text fill="currentColor" y="9" dy="0.71em">80</text>
+      </g>
+      <g class="tick" opacity="1" transform="translate(240.5,0)">
+        <line stroke="currentColor" y2="6" y1="-10"></line>
+        <text fill="currentColor" y="9" dy="0.71em">100</text>
+      </g>
+    </g>
+  </svg><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="245" height="60" viewBox="0 0 245 60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <style>
+      .plot {
+        display: block;
+        background: white;
+        height: auto;
+        height: intrinsic;
+        max-width: 100%;
+      }
+
+      .plot text,
+      .plot tspan {
+        white-space: pre;
+      }
+    </style>
+    <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,0)">
+      <path transform="translate(20,30)" d="M0,0L0,6"></path>
+      <path transform="translate(122.5,30)" d="M0,0L0,6"></path>
+      <path transform="translate(225,30)" d="M0,0L0,6"></path>
+    </g>
+    <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)">
+      <text y="0.71em" transform="translate(20,30)">0.0</text>
+      <text y="0.71em" transform="translate(122.5,30)">0.5</text>
+      <text y="0.71em" transform="translate(225,30)">1.0</text>
+    </g>
+    <g aria-label="dot" transform="translate(0.5,0.5)">
+      <circle cx="20" cy="15" r="10" fill="rgb(35, 23, 27)"></circle>
+      <circle cx="40.5" cy="15" r="10" fill="rgb(74, 88, 221)"></circle>
+      <circle cx="81.5" cy="15" r="10" fill="rgb(39, 215, 196)"></circle>
+      <circle cx="225" cy="15" r="10" fill="rgb(144, 12, 0)"></circle>
+    </g>
+    <g aria-label="tip" fill="white" stroke="currentColor" text-anchor="start" transform="translate(0.5,0.5)"></g>
+  </svg></figure>

test/plots/tip.ts

@@ -194,3 +194,11 @@ export async function tipRuleAnchored() {
     ]
   });
 }
+
+export async function tipTransform() {
+  return Plot.plot({
+    width: 245,
+    color: {percent: true, legend: true},
+    marks: [Plot.dotX([0, 0.1, 0.3, 1], {fill: Plot.identity, r: 10, frameAnchor: "middle", tip: true})]
+  });
+}