fix ramp legend font-variant (observablehq#911)

markwhiting · Jun 2, 2022 · f00e7cc · f00e7cc
1 parent 82e446c
commit f00e7cc
Show file tree

Hide file tree

Showing 29 changed files with 104 additions and 102 deletions.
diff --git a/src/legends/ramp.js b/src/legends/ramp.js
@@ -149,14 +149,16 @@ export function legendRamp(color, {
       .attr("font-family", null)
       .attr("font-variant", impliedString(fontVariant, "normal"))
       .call(tickAdjust)
-      .call(g => g.select(".domain").remove())
-      .call(label === undefined ? () => {} : g => g.append("text")
-          .attr("x", marginLeft)
-          .attr("y", marginTop + marginBottom - height - 6)
-          .attr("fill", "currentColor") // TODO move to stylesheet?
-          .attr("text-anchor", "start")
-          .attr("font-weight", "bold")
-          .text(label));
+      .call(g => g.select(".domain").remove());
+
+  if (label !== undefined) {
+    svg.append("text")
+        .attr("x", marginLeft)
+        .attr("y", marginTop - 6)
+        .attr("fill", "currentColor") // TODO move to stylesheet?
+        .attr("font-weight", "bold")
+        .text(label);
+  }
 
   return svg.node();
 }

diff --git a/test/output/carsHexbin.html b/test/output/carsHexbin.html
@@ -26,8 +26,8 @@
       </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">5,000</text>
-      </g><text x="0" y="-16" fill="currentColor" text-anchor="start" font-weight="bold">weight (lb)</text>
-    </g>
+      </g>
+    </g><text x="0" y="12" fill="currentColor" font-weight="bold">weight (lb)</text>
   </svg><svg class="plot-2" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <style>
       .plot-2 {

diff --git a/test/output/carsJitter.html b/test/output/carsJitter.html
@@ -26,8 +26,8 @@
       </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">200</text>
-      </g><text x="0" y="-16" fill="currentColor" text-anchor="start" font-weight="bold">power (hp)</text>
-    </g>
+      </g>
+    </g><text x="0" y="12" fill="currentColor" font-weight="bold">power (hp)</text>
   </svg><svg class="plot-2" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="350" viewBox="0 0 640 350" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <style>
       .plot-2 {

diff --git a/test/output/colorLegendDiverging.svg b/test/output/colorLegendDiverging.svg
diff --git a/test/output/colorLegendDivergingSqrt.svg b/test/output/colorLegendDivergingSqrt.svg
diff --git a/test/output/colorLegendImplicitLabel.svg b/test/output/colorLegendImplicitLabel.svg
diff --git a/test/output/colorLegendLabelBoth.svg b/test/output/colorLegendLabelBoth.svg
diff --git a/test/output/colorLegendLabelLegend.svg b/test/output/colorLegendLabelLegend.svg
diff --git a/test/output/colorLegendLabelScale.svg b/test/output/colorLegendLabelScale.svg
diff --git a/test/output/colorLegendMargins.svg b/test/output/colorLegendMargins.svg
diff --git a/test/output/colorLegendOrdinalRampTickSize.svg b/test/output/colorLegendOrdinalRampTickSize.svg
diff --git a/test/output/colorLegendQuantile.svg b/test/output/colorLegendQuantile.svg
diff --git a/test/output/colorLegendQuantileImplicit.svg b/test/output/colorLegendQuantileImplicit.svg
diff --git a/test/output/colorLegendQuantize.svg b/test/output/colorLegendQuantize.svg
diff --git a/test/output/colorLegendQuantizeDescending.svg b/test/output/colorLegendQuantizeDescending.svg
diff --git a/test/output/colorLegendQuantizeDescendingReversed.svg b/test/output/colorLegendQuantizeDescendingReversed.svg
diff --git a/test/output/colorLegendQuantizeRange.svg b/test/output/colorLegendQuantizeRange.svg
diff --git a/test/output/colorLegendQuantizeReverse.svg b/test/output/colorLegendQuantizeReverse.svg
diff --git a/test/output/colorLegendThreshold.svg b/test/output/colorLegendThreshold.svg
diff --git a/test/output/colorLegendThresholdTickSize.svg b/test/output/colorLegendThresholdTickSize.svg