Custom modeBarButton - icon renders fine everywhere...except the plotly modeBar
Nessuno ha ancora preso questa issue.
- Lingua principale
- R
- Stelle
- 2.7k
- Fork
- 641
- Metriche di merge delle PR
- Nessuna PR unita negli ultimi 30g
Descrizione
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?
Guida per i contributori
Apri la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Direzione di ricerca
Inizia con l'esempio R usando plotly::config() con modeBarButtonsToAdd e htmlwidgets::onRender(), quindi ispeziona l'SVG modeBar renderizzato in un browser. Riproduci la discrepanza tra il markup SVG identico e l'icona visualizzata; il lavoro è completato quando la causa è stata identificata e l'icona personalizzata Download image viene renderizzata come previsto.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- javascript, r
- Ambito
- data-visualization, frontend
- Tipo di issue
- Bug
- Difficoltà
- 3/5
- Tempo stimato
- 1-2 giorni
- Stato di attività
- Ferma
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 35/100