Custom modeBarButton - icon renders fine everywhere...except the plotly modeBar
オープン
まだ誰も着手していません。
- 主要言語
- 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 にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- 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