Download SVG/PNG truncates tick label of Legend

[espinielli]

Describe the bug The left (tick) label of a Legend gets truncated on "Download SVG" or "Download PNG".

To Reproduce See https://observablehq.com/@espinielli/legend-tick-lable-truncated-on-export

Steps to reproduce the behavior:

1. Go to '...' on the left of the legend cell
2. Click on 'Download PNG' (similarly ofr SVG)
3. Open the save file and you will get a truncated label as per the notebook image
4. See error

Expected behavior A full exported Legend with no truncated labels.

Screenshots See notebook

Desktop (please complete the following information):

• OS: MS Windows 10 Enterprise, MacOS 12.2.1 Monterey MBP M1 Max.
• Browser: Firefox (MS Windows) 98.0.1 (64-bit), Brave (MacOS) 1.36.117 Chromium 99.0.484474 (arm64)

[Fil]

D3’s Legend component uses a “bleeding out” strategy (style: "overflow: visible") which means that the contents outside the SVG’s bounding box are visible. But the image is cut from the bounding box.

There are two ways to change this:

1. add an option like marginLeft: 16 to the call to Legend().

2. In cases where such an option doesn't exist (not for this component, but say, in general), you could wrap the cell with HTML:

<div style="margin-left: 16px; width: 352px">${Legend(interpolator, {
  title: "Overflight daily variation",
  tickFormat: "+%"
})}</div>

(The second solution is new.)

Sorry it took us a long time to identify a good solution.