Custom modeBarButton - icon renders fine everywhere...except the plotly modeBar
未关闭
还没有人认领这个 Issue。
- 主要语言
- R
- 星标
- 2.7k
- 派生
- 641
- PR 合并指标
- 30 天内没有已合并 PR
描述
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?
贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
调研方向
从使用带有 modeBarButtonsToAdd 和 htmlwidgets::onRender() 的 plotly::config() 的 R 示例开始,然后在浏览器中检查渲染出的 modeBar SVG。重现完全相同的 SVG 标记与显示图标之间的不一致;在确定原因且自定义 Download image 图标按预期渲染后即完成。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- javascript, r
- 领域
- data-visualization, frontend
- Issue 类型
- 缺陷
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 活跃度
- 停滞
- 描述清晰度
- 基本清楚
- 新手友好度
- 35/100