fix ramp legend font-variant (#911)

mbostock · web-flow · commit f00e7ccf4d7b · 2022-06-02T12:58:41.000-07:00
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
@@ -29,6 +29,6 @@
     </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">+10%</text>
-    </g><text x="0" y="-16" fill="currentColor" text-anchor="start" font-weight="bold">Daily change</text>
-  </g>
+    </g>
+  </g><text x="0" y="12" fill="currentColor" font-weight="bold">Daily change</text>
 </svg>
diff --git a/test/output/colorLegendDivergingSqrt.svg b/test/output/colorLegendDivergingSqrt.svg
@@ -29,6 +29,6 @@
     </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">+10%</text>
-    </g><text x="0" y="-16" fill="currentColor" text-anchor="start" font-weight="bold">Daily change</text>
-  </g>
+    </g>
+  </g><text x="0" y="12" fill="currentColor" font-weight="bold">Daily change</text>
 </svg>
diff --git a/test/output/colorLegendImplicitLabel.svg b/test/output/colorLegendImplicitLabel.svg
@@ -29,6 +29,6 @@
     </g>
     <g class="tick" opacity="1" transform="translate(194.5,0)">
       <line stroke="currentColor" y2="6" y1="-10"></line><text fill="currentColor" y="9" dy="0.71em">80</text>
-    </g><text x="0" y="-16" fill="currentColor" text-anchor="start" font-weight="bold">thing</text>
-  </g>
+    </g>
+  </g><text x="0" y="12" fill="currentColor" font-weight="bold">thing</text>
 </svg>
diff --git a/test/output/colorLegendLabelBoth.svg b/test/output/colorLegendLabelBoth.svg
@@ -32,6 +32,6 @@
     </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">10</text>
-    </g><text x="0" y="-16" fill="currentColor" text-anchor="start" font-weight="bold">Legend</text>
-  </g>
+    </g>
+  </g><text x="0" y="12" fill="currentColor" font-weight="bold">Legend</text>
 </svg>
diff --git a/test/output/colorLegendLabelLegend.svg b/test/output/colorLegendLabelLegend.svg
@@ -32,6 +32,6 @@
     </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">10</text>
-    </g><text x="0" y="-16" fill="currentColor" text-anchor="start" font-weight="bold">Legend</text>
-  </g>
+    </g>
+  </g><text x="0" y="12" fill="currentColor" font-weight="bold">Legend</text>
 </svg>
diff --git a/test/output/colorLegendLabelScale.svg b/test/output/colorLegendLabelScale.svg
@@ -32,6 +32,6 @@
     </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">10</text>
-    </g><text x="0" y="-16" fill="currentColor" text-anchor="start" font-weight="bold">Scale</text>
-  </g>
+    </g>
+  </g><text x="0" y="12" fill="currentColor" font-weight="bold">Scale</text>
 </svg>
diff --git a/test/output/colorLegendMargins.svg b/test/output/colorLegendMargins.svg
@@ -23,6 +23,6 @@
     </g>
     <g class="tick" opacity="1" transform="translate(350.5,0)">
       <line stroke="currentColor" y2="6" y1="-10"></line><text fill="currentColor" y="9" dy="0.71em">10</text>
-    </g><text x="150" y="-16" fill="currentColor" text-anchor="start" font-weight="bold">I feel blue</text>
-  </g>
+    </g>
+  </g><text x="150" y="12" fill="currentColor" font-weight="bold">I feel blue</text>
 </svg>
diff --git a/test/output/colorLegendOrdinalRampTickSize.svg b/test/output/colorLegendOrdinalRampTickSize.svg
@@ -43,6 +43,6 @@
     </g>
     <g class="tick" opacity="1" transform="translate(222.5,0)">
       <line stroke="currentColor" y2="0"></line><text fill="currentColor" y="3" dy="0.71em">≥70</text>
-    </g><text x="0" y="-16" fill="currentColor" text-anchor="start" font-weight="bold">Age (years)</text>
-  </g>
+    </g>
+  </g><text x="0" y="12" fill="currentColor" font-weight="bold">Age (years)</text>
 </svg>
diff --git a/test/output/colorLegendQuantile.svg b/test/output/colorLegendQuantile.svg
@@ -40,6 +40,6 @@
     </g>
     <g class="tick" opacity="1" transform="translate(206.5,0)">
       <line stroke="currentColor" y2="6" y1="-10"></line><text fill="currentColor" y="9" dy="0.71em">7,201</text>
-    </g><text x="0" y="-16" fill="currentColor" text-anchor="start" font-weight="bold">Inferno</text>
-  </g>
+    </g>
+  </g><text x="0" y="12" fill="currentColor" font-weight="bold">Inferno</text>
 </svg>
diff --git a/test/output/colorLegendQuantileImplicit.svg b/test/output/colorLegendQuantileImplicit.svg
@@ -40,6 +40,6 @@
     </g>
     <g class="tick" opacity="1" transform="translate(206.5,0)">
       <line stroke="currentColor" y2="6" y1="-10"></line><text fill="currentColor" y="9" dy="0.71em">7,201</text>
-    </g><text x="0" y="-16" fill="currentColor" text-anchor="start" font-weight="bold">Inferno</text>
-  </g>
+    </g>
+  </g><text x="0" y="12" fill="currentColor" font-weight="bold">Inferno</text>
 </svg>
diff --git a/test/output/colorLegendQuantize.svg b/test/output/colorLegendQuantize.svg
@@ -44,6 +44,6 @@
     </g>
     <g class="tick" opacity="1" transform="translate(210.5,0)">
       <line stroke="currentColor" y2="6" y1="-10"></line><text fill="currentColor" y="9" dy="0.71em">140</text>
-    </g><text x="0" y="-16" fill="currentColor" text-anchor="start" font-weight="bold">quantize scale</text>
-  </g>
+    </g>
+  </g><text x="0" y="12" fill="currentColor" font-weight="bold">quantize scale</text>
 </svg>
diff --git a/test/output/colorLegendQuantizeDescending.svg b/test/output/colorLegendQuantizeDescending.svg
@@ -44,6 +44,6 @@
     </g>
     <g class="tick" opacity="1" transform="translate(210.5,0)">
       <line stroke="currentColor" y2="6" y1="-10"></line><text fill="currentColor" y="9" dy="0.71em">20</text>
-    </g><text x="0" y="-16" fill="currentColor" text-anchor="start" font-weight="bold">quantize descending</text>
-  </g>
+    </g>
+  </g><text x="0" y="12" fill="currentColor" font-weight="bold">quantize descending</text>
 </svg>
diff --git a/test/output/colorLegendQuantizeDescendingReversed.svg b/test/output/colorLegendQuantizeDescendingReversed.svg
@@ -32,6 +32,6 @@
     </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">2</text>
-    </g><text x="0" y="-16" fill="currentColor" text-anchor="start" font-weight="bold">quantize descending reversed</text>
-  </g>
+    </g>
+  </g><text x="0" y="12" fill="currentColor" font-weight="bold">quantize descending reversed</text>
 </svg>
diff --git a/test/output/colorLegendQuantizeRange.svg b/test/output/colorLegendQuantizeRange.svg
@@ -32,6 +32,6 @@
     </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">115.4</text>
-    </g><text x="0" y="-16" fill="currentColor" text-anchor="start" font-weight="bold">quantize scale</text>
-  </g>
+    </g>
+  </g><text x="0" y="12" fill="currentColor" font-weight="bold">quantize scale</text>
 </svg>
diff --git a/test/output/colorLegendQuantizeReverse.svg b/test/output/colorLegendQuantizeReverse.svg
@@ -44,6 +44,6 @@
     </g>
     <g class="tick" opacity="1" transform="translate(210.5,0)">
       <line stroke="currentColor" y2="6" y1="-10"></line><text fill="currentColor" y="9" dy="0.71em">80</text>
-    </g><text x="0" y="-16" fill="currentColor" text-anchor="start" font-weight="bold">quantize reversed</text>
-  </g>
+    </g>
+  </g><text x="0" y="12" fill="currentColor" font-weight="bold">quantize reversed</text>
 </svg>
diff --git a/test/output/colorLegendThreshold.svg b/test/output/colorLegendThreshold.svg
@@ -52,6 +52,6 @@
     </g>
     <g class="tick" opacity="1" transform="translate(216.5,0)">
       <line stroke="currentColor" y2="6" y1="-10"></line><text fill="currentColor" y="9" dy="0.71em">9</text>
-    </g><text x="0" y="-16" fill="currentColor" text-anchor="start" font-weight="bold">Viridis</text>
-  </g>
+    </g>
+  </g><text x="0" y="12" fill="currentColor" font-weight="bold">Viridis</text>
 </svg>
diff --git a/test/output/colorLegendThresholdTickSize.svg b/test/output/colorLegendThresholdTickSize.svg
@@ -48,6 +48,6 @@
     </g>
     <g class="tick" opacity="1" transform="translate(213.5,0)">
       <line stroke="currentColor" y2="0" y1="-10"></line><text fill="currentColor" y="3" dy="0.71em">9.5</text>
-    </g><text x="0" y="-16" fill="currentColor" text-anchor="start" font-weight="bold">Unemployment rate (%)</text>
-  </g>
+    </g>
+  </g><text x="0" y="12" fill="currentColor" font-weight="bold">Unemployment rate (%)</text>
 </svg>
diff --git a/test/output/colorSchemesQuantitative.html b/test/output/colorSchemesQuantitative.html
diff --git a/test/output/hexbinR.html b/test/output/hexbinR.html
diff --git a/test/output/opacityLegend.svg b/test/output/opacityLegend.svg
diff --git a/test/output/opacityLegendColor.svg b/test/output/opacityLegendColor.svg
diff --git a/test/output/opacityLegendLinear.svg b/test/output/opacityLegendLinear.svg
diff --git a/test/output/opacityLegendLog.svg b/test/output/opacityLegendLog.svg
diff --git a/test/output/opacityLegendRange.svg b/test/output/opacityLegendRange.svg
diff --git a/test/output/opacityLegendSqrt.svg b/test/output/opacityLegendSqrt.svg
diff --git a/test/output/simpsonsViews.html b/test/output/simpsonsViews.html
