Estoy tratando de crear una leyenda de tipo de muestra en mi gráfico y siguiendo esta referencia. ( https://observablehq.com/@d3/color-legend )

Pero cuando aplico el código anterior, los resultados en html se ven así:

 <div style="display: flex; align-items: center; margin-left: ${+marginLeft}px; min-height: 33px; font: 10px sans-serif;"> <style> .${id}-item { break-inside: avoid; display: flex; align-items: center; padding-bottom: 1px; } .${id}-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - ${+swatchWidth}px - 0.5em); } .${id}-swatch { width: ${+swatchWidth}px; height: ${+swatchHeight}px; margin: 0 0.5em 0 0; } </style> <div style="width: 100%"; columns: 300px"> "[object Object], [object Object], [object Object], [object Object] " </div> </div>

Debería verse así en html:

 <div ...> <style> ... </style> <div style="width: 100%; columns: 300px"> <div class="-swatches-99bef5aa19961-swatch" style="background: rgb(31, 119, 180);"></div> <div class="-swatches-99bef5aa19961-label" title="title1">title1</div> </div>

Sin embargo, supongo que la cláusula sobre el retorno dentro de la declaración literal de la plantilla, ni siquiera sé cuál es el problema real y cómo resolverlo.

¿Alguien puede ayudar a resolver esto?