自定义模式栏图标可更改颜色和形状，并从R在新窗口中打开链接 [英] Plotly custom modebar icon change color and shape, and open link in a new window from R
问题描述
我正在使用自定义模式栏图标在新窗口中打开链接，并遇到一些相关问题
I am using a custom modebar icon to open a link in a new window, and have some related problems
问题1) 自定义图标不是正方形.如果重新缩放以适合正方形，则尺寸会太小.您如何使其正确显示?要编辑编织rmarkdown后获得的html，操作很简单，只需右键单击图标，然后选择inspect，您可以将宽度从1em更改为2em，以获得一个宽矩形.
Problem 1) Custom icon is not a square. If rescaled to fit in a square would be too small. How do you get it to display properly? To edit in the html that you get after knitting your rmarkdown is straightforward, by right clicking on your icon, and selecting inspect, you can change the width from 1em to 2em to get a wide rectangle.
<svg viewBox="0 0 NaN" class="icon" height="1em" width="2em">
如何在R中控制它?
问题2) 自定义图标采用默认的暗灰色.如何获得您喜欢的颜色?要编辑编织rmarkdown后得到的html，操作很简单，只需右键单击您的图标，然后选择检查，然后在下面添加style = fill ...代码，即可使用您的颜色:
Problem 2) Custom icon comes in default drab gray. How to get your preferred color? To edit in the html that you get after knitting your rmarkdown is straightforward, by right clicking on your icon, and selecting inspect, and adding the style = fill... code below, your color can be used:
transform="scale(1) translate(0, -8)" style="fill:#7ac143"></path>
如何在R中控制它?下面的示例代码未使用颜色设置.
How do you control this in R? Example code below doesn't use the colour setting.
问题3) 图标具有一个链接，该链接可以在新窗口中理想地打开. plotly按钮的确会打开一个新窗口.下面的自定义图标示例代码未使用空白"选项在新窗口中打开.
Problem 3) Icon has a link which ideally opens in a new window. The plotly button does open a new window. Example code below for the custom icon doesn't use the "blank" option to open in a new window.
如何在新窗口中打开它?
---
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
# Notes
# (3) Size of viewbox ideally is controlled via here to show rectangular icon neatly.
# (4) Colour control doesn't work
# (5) Open link in new window doesn't work
mc_button <- list(
name = "MasterCard",
icon = list(
path = mc_icon_svg_path,
transform = "scale(1) translate(0, -8)",
style = "fill:#7ac143"
),
click = htmlwidgets::JS(
"function(gd) {window.location.href = 'http://www.mastercard.com', target='_blank';}"
)
)
# (6) Some additional customisation
ggplotly(gg) %>%
config(modeBarButtonsToAdd = list(mc_button)) %>%
config(displayModeBar = TRUE)
推荐答案
问题1)我真的不知道有什么好的解决方案，只是尝试重新调整它的大小.但是您当然可以使用htmlwidgets::onRender方法将宽度设置为"2em".我也用它来更改填充.
Problem 1) I dont really know a good solution for this, except trying to rescale it until its ok. But you can certainly set the width to "2em" using the htmlwidgets::onRender method. I use it for changing the fill aswell.
问题2)，您可以使用onRender更改 svg路径的样式.在函数内部，我使用data-title MasterCard 定义了2个CSS选择器.一个用于svg，一个用于svg内部的路径，然后您可以使用Jquery的css()更改其css设置.
Problem 2) You can use onRender to change the styling of the svg path. Inside the function I define 2 css selectors using the data-title MasterCard. One for the svg and one for the path inside the svg and then you can change their css settings with Jquery's css().
问题3)尝试改用window.open.这将在新标签页中打开页面.
Problem 3) Try to use window.open instead. That will open the page in a new tab.
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");
}')
这篇关于自定义模式栏图标可更改颜色和形状，并从R在新窗口中打开链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
