英文:
How to add an icon or custom image to nodes in treeInput of shinyWidgets?
问题
这提供了一个基本的树结构。如何在这些节点上添加例如Font Awesome图标或相对文件路径中的自定义标志呢？
英文:
This gives a basic tree. How could I add for example font-awesome icons or custom flags saved in a relative file path to these nodes?
library(shiny)
library(shinyWidgets)
df <- data.frame(continent = c(rep("Europe", 2), rep("Asia", 2)),
country = c("France", "Germany", "China", "Japan"))
mytree <- create_tree(df, c("continent", "country"))
ui <- fluidPage(
shinyWidgets::treeInput("mytree", "mytree", mytree)
)
server <- function(input, output, session) {}
shinyApp(ui, server)
答案1
得分: 3
- 在R中，您可以在脚本中使用Unicode字符，参见Unicode问题。
- 使用
emoji包，您可以在脚本中使用表情符号，详见cran emoji包。 - 在您的示例中，可以使用
emoji中的flag函数来使用国旗表情符号。 - 对于更复杂的任务，请考虑使用grImport2中实现的矢量图形。
library(shiny)
library(shinyWidgets)
library(emoji)
df <- data.frame(continent = c(rep("\U2727", 2), rep("\U24B8", 2)),
country = c(flag("France"), flag("Germany"), flag("China"), flag("Japan")))
mytree <- create_tree(df, c("continent", "country"))
ui <- fluidPage(
shinyWidgets::treeInput("mytree", "mytree", mytree)
)
server <- function(input, output, session) {}
shinyApp(ui, server)
英文:
-
In R you can use unicode characters in your script
see this page Unicode question -
With the
emojipackage you can do the same with emoji, see cran emoji packageFlag emoji are suitable in your example using the
flagfunction in emoji -
For more complicated tasks consider vector graphics implemented in grImport2
library(shiny)
library(shinyWidgets)
library(emoji)
df <- data.frame(continent = c(rep("\U2727", 2), rep("\U24B8", 2)),
country = c(flag("France"), flag("Germany"), flag("China"), flag("Japan")))
mytree <- create_tree(df, c("continent", "country"))
ui <- fluidPage(
shinyWidgets::treeInput("mytree", "mytree", mytree)
)
server <- function(input, output, session) {}
shinyApp(ui, server)
答案2
得分: 1
如果使用其他包可以的话，{shinyTree} 是一个选择。
它可以使用 fontAwesome 图标或一组 {shinyTree} 内置图标。
您还可以使用 HTML 来设置项目标签，从而提供自己的图像来源。
请确保将静态内容（例如：图像文件）放在您的应用程序文件夹的子文件夹 www 中，以便 Shiny 可以找到它们。不要在路径中包含 www。例如：参考文件 www/flag_A.png 时，使用 <img src = 'file.png'>。
使用自定义图像的输出：
-
在这里找到国旗仓库 链接
-
对于有很多符号的情况，将类添加到您的图像可能会更方便，例如
<img class='flag' ...>，这样您可以通过 CSS 来应用大小、透明度等效果到所有的国旗 参考。
英文:
If using another package is OK, {shinyTree} would be an option.
It can use fontAwesome icons or a set of {shinyTree} builtin icons.
You can also use HTML for item labels, thus offering to source your own images.
library(shiny)
library(shinyTree)
ui <- fluidPage(
shinyTree::shinyTree('myShinyTree',
checkbox = TRUE,
themeIcons = FALSE,
theme = 'proton'
)
)
server <- function(input, output, session) {
df <- data.frame(continent = c(rep("Letteria", 2), rep("Numberalia", 1)),
country = c("<img src = 'flag_A.png' width = '50px' /> A-Land",
"<img src = 'flag_B.png' width = '50px' /> B-Country",
"<img src = 'flag_1.png' width = '50px' /> Uni Kingdom"
)
)
output$myShinyTree <- renderTree({
tree_list <- dfToTree(df) ## dfToTree converts df into a hierarch. list
attr(tree_list, 'stopened') <- TRUE
## set the 'stopened' attribute on each node to uncollapse the whole tree
tree_list <- tree_list |>
Map(f = \(.) {attr(., 'stopened') <- TRUE; .})
})
}
shinyApp(ui, server)
Remember to put static content (here: the image files) in a subfolder www of your app's folder, so that Shiny will find it. Do not include the www in your path though. Example: reference file www/flag_A.png as <img src = 'file.png'>.
Output with custom images:
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论