plotly / plotly/plotly.R

Custom modeBarButton - icon renders fine everywhere...except the plotly modeBar

未关闭
#2,266 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 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:
echart-download-small

<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...
image

Any ideas as to why?

贡献指南

打开贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 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

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。