htmlhtml 中并排的小部件？

Question

假设我有两个 html小部件

# Load energy projection data
# Load energy projection data
library(networkD3)
URL <- paste0(
        "https://cdn.rawgit.com/christophergandrud/networkD3/",
        "master/JSONdata/energy.json")
Energy <- jsonlite::fromJSON(URL)
# Plot
sankeyNetwork(Links = Energy$links, Nodes = Energy$nodes, Source = "source",
             Target = "target", Value = "value", NodeID = "name",
             units = "TWh", fontSize = 12, nodeWidth = 30)

和

library(leaflet)
data(quakes)

# Show first 20 rows from the `quakes` dataset
leaflet(data = quakes[1:20,]) %>% addTiles() %>%
  addMarkers(~long, ~lat, popup = ~as.character(mag))

我想将它们并排放在 html 页面中。我怎样才能做到这一点？我可以使用 iframe 吗？其他？

Answer 1

有很多方法可以回答这个问题。大小和位置通常会因 htmlwidget 的作者而异，因此您可能需要进行一些试验。如果您不打算将 CSS 框架与网格助手一起使用，最简单的方法是将每个 htmlwidget 包装在 tags$div() 中并使用 CSS。您也可能对来自 RStudio http://github.com/rstudio/flexdashboard.

的非常好的新的基于 flexbox 的仪表板包感兴趣

# Load energy projection data
# Load energy projection data
library(networkD3)
URL <- paste0(
  "https://cdn.rawgit.com/christophergandrud/networkD3/",
  "master/JSONdata/energy.json")
Energy <- jsonlite::fromJSON(URL)
# Plot
sn <- sankeyNetwork(Links = Energy$links, Nodes = Energy$nodes, Source = "source",
              Target = "target", Value = "value", NodeID = "name",
              units = "TWh", fontSize = 12, nodeWidth = 30,
              width = "100%")
library(leaflet)
data(quakes)

# Show first 20 rows from the `quakes` dataset
leaf <- leaflet(data = quakes[1:20,]) %>% addTiles() %>%
  addMarkers(~long, ~lat, popup = ~as.character(mag))


library(htmltools)
browsable(
  tagList(list(
    tags$div(
      style = 'width:50%;display:block;float:left;',
      sn
    ),
    tags$div(
      style = 'width:50%;display:block;float:left;',
      leaf
    )
  ))
)

htmlhtml 中并排的小部件？

htmlwidgets side by side in html?

html

r

r-markdown

htmlwidgets