Custom modeBarButton - icon renders fine everywhere...except the plotly modeBar
Nadie ha tomado este issue todavía.
- Lenguaje dominante
- R
- Estrellas
- 2.7k
- Forks
- 641
- Métricas de merge de PR
- Sin PR fusionados en 30 d
Descripción
I want to replace the Download image icon in the modeBar - seems like a simple enough task?
It's been a real struggle though.
I have this icon:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-8.717 -10 17.435 20" width="17.435" height="20"><path stroke="#666" fill="none" d="m-4.048-.989 3.992 3.667L4.065-.908M-4.064 2.37v2.336h7.982V2.369m-3.992.244v-7.319" stroke-width="1.176"/></svg>
I'd like to use it as the Download image icon, based on a bunch of research on SO, Plotly issues and posit community forums I've come up with the following code for doing so:
dl_button <- list(
name = "Save As Image",
icon = list(
width = 17.435,
height = 20,
path = "m-4.048-.989 3.992 3.667L4.065-.908M-4.064 2.37v2.336h7.982V2.369m-3.992.244v-7.319"
),
click = htmlwidgets::JS("
function(e) {
Plotly.downloadImage(e.id, {format: 'png', width: 800, height: 600, filename: e.id});
}
")
)
plotly::plot_ly(mtcars, x = ~cyl) |>
plotly::config(
displaylogo = FALSE,
modeBarButtonsToAdd = list(dl_button),
modeBarButtonsToRemove = c(
"zoomIn2d",
"zoom2d",
"pan2d",
"zoomOut2d",
"select2d",
"lasso2d",
"autoScale2d",
"resetScale2d",
"hoverClosestCartesian",
"hoverCompareCartesian",
"toImage"
)
) |>
htmlwidgets::onRender('function(el, x) {
$("[data-title=\'Save As Image\'] svg path").attr("fill", "none").attr("stroke-width", "1.176");
$("[data-title=\'Save As Image\'] svg").attr("viewBox","-8.717 -10 17.435 20").attr("width", "17.435px").attr("height", "20px");
}')
Note that the HTML/svg for the icon in the rendered plot is identical to what's above, yet...
Any ideas as to why?
Guía de contribución
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Línea de trabajo
Comienza con el ejemplo de R usando plotly::config() con modeBarButtonsToAdd y htmlwidgets::onRender(), y luego inspecciona el SVG de modeBar renderizado en un navegador. Reproduce la discrepancia entre el marcado SVG idéntico y el icono mostrado; estará terminado cuando se identifique la causa y el icono personalizado Download image se renderice como se espera.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- javascript, r
- Área
- data-visualization, frontend
- Tipo de issue
- Error
- Dificultad
- 3/5
- Tiempo estimado
- 1-2 días
- Estado de actividad
- Estancado
- Claridad
- Bastante claro
- Aptitud para principiantes
- 35/100