htmlwidgets бок о бок в html?

Скажем, у меня есть два 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? Другой?


r html r-markdown htmlwidgets
person Scott    schedule 11.03.2016    source источник

Ответы (1)


arrow_upward
7
arrow_downward

Есть много способов ответить на этот вопрос. Часто размер и расположение зависят от автора htmlwidget, поэтому вам, возможно, придется немного поэкспериментировать. Самый простой способ, если вы не планируете использовать CSS фреймворк с помощниками по сетке, - это обернуть каждый htmlwidget в tags$div() и использовать CSS. Возможно, вас заинтересует очень хороший новый пакет панели инструментов на основе Flexbox от RStudio http://github.com/rstudio/flexdashboard.

# 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
    )
  ))
)
person timelyportfolio    schedule 11.03.2016
comment
СВЯТАЯ КОРОВА это (flexdashboard) ИМЕННО то, что мне нужно. Т. Кент !! - person Scott; 12.03.2016
comment
Лол, я просто подумал, что готов поспорить, что своевременное портфолио может ответить на этот вопрос, и я натолкнулся на этот ответ. - person BrodieG; 20.01.2017
comment
Недавно я провел еще один эксперимент со Split.js здесь, github. com / r-space / mapedit / blob / master / inst / Experts /, если кому-то интересно. Это позволяет изменять размер. - person timelyportfolio; 20.01.2017
comment
Я также должен отметить этот прекрасный новый пакет github.com/rte-antares-rpackage/manipulateWidget для верстки htmlwidgets. - person timelyportfolio; 20.01.2017