大量编辑
如何在绘图图中制作自定义模式栏按钮图标？
[此处][1] 有一些文档，但不清楚如何获取不同的图标或图像，并将其用于模式栏中的图标。你是怎么做到的？
【问题讨论】：
获取图标图片路径
如果您使用的图标已经是svg 格式（例如来自here），您可以将路径（这是有关如何绘制图标的说明）复制到 R 中并将其分配给对象：
dl_icon_svg_path = "M15.608,6.262h-2.338v0.935h2.338c0.516,0,0.934,0.418,0.934,0.935v8.879c0,0.517-0.418,0.935-0.934,0.935H4.392c-0.516,0-0.935-0.418-0.935-0.935V8.131c0-0.516,0.419-0.935,0.935-0.935h2.336V6.262H4.392c-1.032,0-1.869,0.837-1.869,1.869v8.879c0,1.031,0.837,1.869,1.869,1.869h11.216c1.031,0,1.869-0.838,1.869-1.869V8.131C17.478,7.099,16.64,6.262,15.608,6.262z M9.513,11.973c0.017,0.082,0.047,0.162,0.109,0.226c0.104,0.106,0.243,0.143,0.378,0.126c0.135,0.017,0.274-0.02,0.377-0.126c0.064-0.065,0.097-0.147,0.115-0.231l1.708-1.751c0.178-0.183,0.178-0.479,0-0.662c-0.178-0.182-0.467-0.182-0.645,0l-1.101,1.129V1.588c0-0.258-0.204-0.467-0.456-0.467c-0.252,0-0.456,0.209-0.456,0.467v9.094L8.443,9.553c-0.178-0.182-0.467-0.182-0.645,0c-0.178,0.184-0.178,0.479,0,0.662L9.513,11.973z"
如果您有徽标（png 或一些随机图像文件类型），第一步是将其转换为 svg 路径。您可以在像Inkscape（开源）这样的图像编辑器中通过导入/粘贴您的图像来执行此操作。 然后使用 [path] [trace] 命令创建路径。您最终可能会遇到多条路径。据我所知，您可能想要一条单一的路径，并且您可能需要接受它最终会成为单一颜色。
要创建单个路径，请使用 [path] [combine] 命令。调整画布大小可能会有所帮助。保存文件，然后在文本编辑器（例如记事本）中打开文件并复制路径（应该类似于上面的示例）。
缩放和调整图像
在 R 中，您可能需要缩放和调整图像。这有点猜测，但执行此操作的代码的 sn-p 看起来像这样，比例因子表现如预期，并分别在 x 和 y 方向平移移动图像：
icon = list(
path = dl_icon_svg_path,
transform = "scale(0.84) translate(-1, -1)"
)
注意，默认情况下，您转换为 svg 的任何图像在 px 比例上可能比图标默认值大得多。由于一些历史默认设置，也有翻转图像的控件，尽管这可能已被修复 - 从 javascript 讨论 here 很难分辨。
更改要显示的图标的形状或尺寸，控制图标的颜色，制作图标下载数据或在新窗口中打开链接
这些选项描述here
额外的定制
多个按钮通过列表很简单：
config(modeBarButtonsToAdd = list(mc_button,dl_button))
按钮顺序
模式栏的显示 此处描述了隐藏模式栏。总是显示模式栏是反向完成的，即：
config(displayModeBar = TRUE)
这是一个独立的 rmarkdown 示例，您可以复制和编织：
---
title: "Custom icons in Plotly"
output: html_document
---
```{r echo = FALSE, message = FALSE}
library(plotly)
library(htmlwidgets)
library(ggplot2)
data <- data.frame(
Time = round(runif(10), 2),
Value = round(runif(10), 2),
Type = rep(c("A", "B"), each = 5)
)
gg <- ggplot(data = data) +
theme(legend.title = element_blank()) +
geom_point(mapping = aes(x = Time, y = Value, colour = Type), size = 2)
# (1) svg path copied from svg file opened in notepad
# logo-mastercard.svg from https://github.com/plotly/plotly-icons/tree/master/src/svg
mc_icon_svg_path = "M29.375 16c0-1.438-0.375-2.813-1.063-4.063-0.75-1.188-1.75-2.125-2.938-2.875-1.313-0.688-2.625-1.063-4-1.063-1.813 0-3.438 0.563-4.875 1.625 1.313 1.188 2.125 2.563 2.563 4.188h-0.75c-0.375-1.375-1.125-2.688-2.313-3.75-1.188 1.063-1.938 2.375-2.313 3.75h-0.75c0.438-1.625 1.25-3 2.563-4.188-1.438-1.063-3.063-1.625-4.875-1.625-1.375 0-2.688 0.375-4 1.063-1.188 0.75-2.188 1.688-2.938 2.875-0.688 1.25-1.063 2.625-1.063 4.063s0.375 2.813 1.063 4.063c0.75 1.188 1.75 2.125 2.938 2.875 1.313 0.688 2.625 1.063 4 1.063 1.813 0 3.438-0.563 4.875-1.625-1.188-1.063-2-2.313-2.5-3.875h0.75c0.438 1.313 1.188 2.5 2.25 3.438 1.063-0.938 1.813-2.125 2.25-3.438h0.75c-0.5 1.563-1.313 2.813-2.5 3.875 1.438 1.063 3.063 1.625 4.875 1.625 1.375 0 2.688-0.375 4-1.063 1.188-0.75 2.188-1.688 2.938-2.875 0.688-1.25 1.063-2.625 1.063-4.063zM6.125 14.063h1.25l-0.625 3.875h-0.813l0.5-2.938-1.063 2.938h-0.625v-2.938l-0.5 2.938h-0.813l0.688-3.875h1.188v2.375zM9.875 15.688c0 0.188-0.063 0.375-0.063 0.563-0.063 0.313-0.125 0.625-0.188 0.875 0 0.25-0.063 0.438-0.125 0.625v0.188h-0.625v-0.375c-0.188 0.313-0.5 0.438-0.875 0.438-0.25 0-0.375-0.063-0.5-0.188-0.188-0.188-0.25-0.438-0.25-0.688 0-0.375 0.125-0.688 0.375-0.875 0.313-0.188 0.688-0.313 1.125-0.313h0.313v-0.188c0-0.188-0.188-0.25-0.563-0.25-0.188 0-0.5 0-0.813 0.125 0-0.188 0.063-0.438 0.125-0.688 0.313-0.125 0.625-0.188 0.938-0.188 0.75 0 1.125 0.313 1.125 0.938zM8.938 16.5h-0.188c-0.438 0-0.688 0.188-0.688 0.5 0 0.188 0.063 0.313 0.25 0.313s0.313-0.063 0.438-0.188c0.125-0.125 0.188-0.313 0.188-0.625zM12.188 14.813l-0.125 0.75c-0.188-0.063-0.375-0.063-0.625-0.063s-0.375 0.063-0.375 0.25c0 0.063 0 0.125 0.063 0.188l0.25 0.125c0.375 0.25 0.563 0.5 0.563 0.875 0 0.688-0.375 1.063-1.25 1.063-0.375 0-0.688-0.063-0.813-0.063 0-0.188 0.063-0.438 0.125-0.75 0.313 0.063 0.563 0.125 0.688 0.125 0.313 0 0.5-0.063 0.5-0.25 0-0.063-0.063-0.188-0.063-0.188-0.125-0.125-0.188-0.188-0.375-0.188-0.375-0.188-0.563-0.5-0.563-0.875 0-0.688 0.375-1.063 1.188-1.063 0.375 0 0.688 0 0.813 0.063zM13.438 14.813h0.375l-0.063 0.813h-0.438c0 0.188-0.063 0.375-0.063 0.563 0 0.063-0.063 0.125-0.063 0.25 0 0.188-0.063 0.25-0.125 0.313v0.25c0 0.188 0.125 0.25 0.313 0.25 0.063 0 0.125 0 0.25-0.063l-0.125 0.75c-0.125 0-0.313 0.063-0.625 0.063-0.438 0-0.625-0.25-0.625-0.688 0-0.25 0-0.563 0.125-0.875l0.313-2.063h0.813zM16.375 15.875c0 0.313 0 0.563-0.063 0.813h-1.625c0 0.188 0.063 0.375 0.125 0.438 0.125 0.125 0.313 0.188 0.563 0.188 0.313 0 0.563-0.063 0.875-0.25l-0.125 0.813c-0.188 0.063-0.5 0.125-0.875 0.125-0.875 0-1.375-0.5-1.375-1.375 0-0.625 0.125-1.063 0.438-1.375 0.25-0.313 0.563-0.5 0.938-0.5s0.688 0.125 0.875 0.313c0.188 0.188 0.25 0.438 0.25 0.813zM14.75 16h0.938v-0.188l-0.063-0.125c0-0.063-0.063-0.125-0.063-0.125-0.063 0-0.125-0.063-0.188-0.063h-0.125c-0.25 0-0.438 0.125-0.5 0.5zM18.438 14.813c-0.063 0.063-0.125 0.375-0.313 0.938-0.188-0.063-0.313 0.063-0.5 0.313-0.125 0.5-0.188 1.125-0.313 1.875h-0.875l0.063-0.188c0.188-1.25 0.313-2.25 0.438-2.938h0.813l-0.125 0.438c0.188-0.188 0.313-0.313 0.438-0.375 0.125-0.125 0.25-0.125 0.375-0.063zM21.25 14.188l-0.188 0.813c-0.25-0.125-0.5-0.188-0.688-0.188-0.375 0-0.625 0.125-0.813 0.375s-0.25 0.563-0.25 1.063c0 0.313 0.063 0.563 0.188 0.688 0.125 0.188 0.313 0.25 0.563 0.25 0.188 0 0.438-0.063 0.688-0.188l-0.125 0.875c-0.188 0.063-0.438 0.125-0.75 0.125-0.438 0-0.75-0.188-1.063-0.5-0.25-0.25-0.375-0.625-0.375-1.188 0-0.625 0.188-1.188 0.563-1.625 0.313-0.438 0.75-0.688 1.313-0.688 0.188 0 0.5 0.063 0.938 0.188zM23.625 15.688c0 0-0.063 0.125-0.063 0.25s0 0.25 0 0.313c-0.063 0.25-0.125 0.563-0.188 0.938 0 0.375-0.063 0.625-0.125 0.75h-0.625v-0.375c-0.188 0.313-0.5 0.438-0.875 0.438-0.25 0-0.375-0.063-0.5-0.188-0.188-0.188-0.25-0.438-0.25-0.688 0-0.375 0.125-0.688 0.375-0.875 0.313-0.188 0.625-0.313 1.063-0.313h0.313c0.063-0.063 0.063-0.125 0.063-0.188 0-0.188-0.188-0.25-0.5-0.25-0.25 0-0.563 0-0.875 0.125 0-0.188 0-0.438 0.125-0.688 0.375-0.125 0.625-0.188 0.938-0.188 0.75 0 1.125 0.313 1.125 0.938zM22.688 16.5h-0.188c-0.438 0-0.688 0.188-0.688 0.5 0 0.188 0.125 0.313 0.25 0.313 0.188 0 0.313-0.063 0.438-0.188s0.188-0.313 0.188-0.625zM25.625 14.813c-0.125 0.188-0.25 0.5-0.313 0.938-0.188-0.063-0.313 0.063-0.438 0.313s-0.188 0.875-0.375 1.875h-0.813l0.063-0.188c0.188-1 0.313-2 0.375-2.938h0.813c0 0.188-0.063 0.313-0.063 0.438 0.125-0.188 0.25-0.313 0.375-0.375 0.188-0.063 0.313-0.125 0.375-0.063zM27.688 14.063h0.875l-0.688 3.875h-0.75l0.063-0.313c-0.188 0.25-0.438 0.375-0.75 0.375-0.375 0-0.563-0.125-0.688-0.375-0.25-0.25-0.375-0.563-0.375-0.875 0-0.625 0.188-1.063 0.5-1.438 0.188-0.313 0.5-0.5 0.875-0.5 0.313 0 0.563 0.125 0.813 0.375zM27.375 16.125c0-0.375-0.188-0.563-0.438-0.563-0.188 0-0.375 0.063-0.5 0.313-0.063 0.125-0.125 0.375-0.125 0.75s0.125 0.563 0.375 0.563c0.188 0 0.375-0.063 0.5-0.25s0.188-0.438 0.188-0.813z"
# (2) Scale/translate works, after some trial and error
mc_button <- list(
name = "MasterCard",
icon = list(
path = mc_icon_svg_path[[1]]
,transform = "scale(0.6 0.6) translate(-3, -2)"
),
click = htmlwidgets::JS(
"function(gd) {window.open('http://www.mastercard.com', '_blank')}"
)
)
ggplotly(gg) %>%
config(modeBarButtonsToAdd = list(mc_button)) %>%
config(displayModeBar = TRUE) %>%
htmlwidgets::onRender('function(el, x) {
$("[data-title=\'MasterCard\'] svg path").css("fill", "#7ac143");
$("[data-title=\'MasterCard\'] svg").css("width","2em");
}')
```
【讨论】：