使用 HTML 为传单设计悬停文本 - 如何为每个逗号插入分隔符

Question

我正在使用 leaflet 来映射观察结果。我还使用 htmltools 来格式化显示每个观察变量的悬停文本。

问题是，我想要包含许多字符串的变量 hobbies 在每一行上显示。每个爱好由逗号分隔。

正在安装和加载所需的包：

install.packages("leaflet")
library(leaflet)
install.packages("htmltools")
library(htmltools)

创建虚拟观察：

name <- c("john", "mary")
age <- c(20, 29)
gender <- c("male", "female")
hobbies <- c("fishing, football, video games", "painting, skiing, body pump, data science")
lat <- c(-12.80103, -12.37845)
long <- c(130.9558, 130.8770)

df <- as.data.frame(cbind(name, age, gender, hobbies, lat, long))

使用传单创建地图：

# Designing hover text with HTML
# lapply here necessary - my real data has much more than 2 rows#
labs <- lapply(seq(nrow(df)), function(i) {
  paste0( '<p>', "Name : ", df[i, "name"], '<p></p>', 
          "Age : ", df[i, "age"], ', ', 
          "Gender : ", df[i, "gender"],'</p><p>',
          "Hobbies : ", df[i, "hobbies"], ','
  )
})

leaflet(df) %>% 
  addProviderTiles("Esri.WorldImagery") %>% 
  addCircleMarkers(lng = ~ long, 
                   lat= ~ lat, 
                   label = lapply(labs, HTML),
                   clusterOptions = markerClusterOptions()
                   )

我得到以下输出：

我不熟悉 html 语法。我无法弄清楚如何为每个爱好添加分界线
以显示在单独的行中，并带有如下选项卡：

Name : mary
Age : 29, Gender : female
Hobbies : painting
          skiing
          body pump
          data science

Answer 1

您可以在 hobbies 向量上使用 gsub 将每个逗号替换为逗号后跟换行符：

hobbies <- c("fishing, football, video games", "painting, skiing, body pump, data science") %>%
  gsub(",", ",<br>", .)

然后构建数据框并正常生成标签。

如果您希望爱好列表彼此对齐，您可以简单地在换行符后插入一些 html 白色 space 字符。我找了四个&emsp; + 一个&ensp; 填了适量的space.

hobbies <- c("fishing, football, video games", "painting, skiing, body pump, data science") %>%
  gsub(",", ",<br>&emsp;&emsp;&emsp;&emsp;&ensp;", .)

最后，请注意，为了让您的示例成为运行，我不得不将 df <- as.data.frame(cbind(name, age, gender, hobbies, lat, long)) 更改为 df <- data.frame(name, age, gender, hobbies, lat, long)，因为您提供的代码正在将您的坐标转换为导致的因素传单抛出错误。我认为这只是您将此示例放在一起的方式的错误，而不是您的真实数据。

使用 HTML 为传单设计悬停文本 - 如何为每个逗号插入分隔符

Designing hover text for leaflet with HTML - how to insert break for each comma

r

r-leaflet

正在安装和加载所需的包：

创建虚拟观察：

使用传单创建地图：