尺寸调整有效，但乍一看，它似乎没有。不过，它还没有准备好。
当您选择选项时，它不会触发画布内的自动调整大小功能。
图形对象的自动调整大小可以正常工作。 （你会在 gif 中看到。）
RStudio 中的查看器窗格不是检查针织文件的最佳方式。编织后在浏览器中查看它……尤其是如果您想进行更改。似乎有时它认为所有 RStudio 都是容器大小，并且您会看到图形在屏幕外运行。我确定这是我编码的方式，但这在 Safari 或 Chrome 中似乎不是问题（我没有检查其他浏览器）。
我尝试了多种不同的方式来触发画布的大小调整。此代码可能会因尝试触发画布的调整大小/缩放范围而产生一些冗余。 （我想我删除了所有不起作用的东西。）也许有了这个，其他人可以解决这个问题。
我使用了一些闪亮的代码，但这不是使用闪亮的运行时。本质上，静态工作是 R，但动态元素不能在 R 中（即调整事件大小、读取选择等）。
在我使用的库中，我调用了shinyRPG。我添加并注释掉了包安装代码，因为该包不是 Cran 包。 （在 Github 上。）
我在编码中所做的假设（以及这个答案）：
- 您具有 Rmarkdown 的应用知识。
- 这些网络图有 25 个。
- 脚本中没有其他 HTML 小部件。
如果这些不正确，请告诉我。
YAML
输出选项
---
title: "Just for antonoyaro8"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---
风格
此代码位于 YAML 和第一个 R 代码块之间。在 RMD 的常规文本区域中——而不是在 R 块中。
<style>
select {
// A reset of styles, including removing the default dropdown arrow
appearance: none;
background-color: transparent;
border: none;
padding: 0 1em 0 0;
margin: 0;
width: 100%;
font-family: inherit;
font-size: inherit;
cursor: inherit;
line-height: inherit;
}
.select {
display: grid;
grid-template-areas: "select";
align-items: center;
position: relative;
min-width: 15ch;
max-width: 100ch;
border: 1px solid var(--select-border);
border-radius: 0.25em;
padding: 0.25em 0.5em;
font-size: 1.25rem;
cursor: pointer;
line-height: 1.1;
background-color: #fff;
background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
}
select[multiple] {
padding-right: 0;
/* Safari will not show options unless labels fit */
height: 50rem; // how many options show at one time
font-size: 1rem;
}
#column-1 > div.containIt > div.visNetwork canvas {
width: 100%;
height: 80%;
}
.containIt {
display: flex;
flex-flow: row wrap;
flex-grow: 1;
justify-content: space-around;
align-items: flex-start;
align-content: space-around;
overflow: hidden;
height: 100%;
width: 100%;
margin-top: 2vw;
height: 80vh;
widhth: 80vw;
overflow: hidden;
}
</style>
库
接下来是第一个 R 块。您不必在flexdashboard 中设置echo = F。
```{r setup, include=FALSE}
library(flexdashboard)
library(visNetwork)
library(htmltools)
library(igraph)
library(tidyverse)
library(shinyRPG) # remotes::install_github("RinteRface/shinyRPG")
```
创建图表的 R 代码
下一部分本质上是您的代码。我在调用的最终版本中更改了一些内容以创建 vizNetwork。
```{r dataStuff}
set.seed(123)
n=15
data = data.frame(tibble(d = paste(1:n)))
relations = data.frame(tibble(
from = sample(data$d),
to = lead(from, default=from[1]),
))
data$name = c("new york", "chicago", "los angeles", "orlando", "houston", "seattle", "washington", "baltimore", "atlanta", "las vegas", "oakland", "phoenix", "kansas", "miami", "newark" )
graph = graph_from_data_frame(relations, directed=T, vertices = data)
#red circle: starting point and final point
V(graph)$color <- ifelse(data$d == relations$from[1], "red", "orange")
a = visIgraph(graph)
m_1 = 1
m_2 = 23.6
a = toVisNetworkData(graph) %>%
c(., list(main = paste0("Trip ", m_1, " : "),
submain = paste0 (m_2, "KM") )) %>%
do.call(visNetwork, .) %>%
visIgraphLayout(layout = "layout_in_circle") %>%
visEdges(arrows = 'to')
# collect the correct order
df2 <- data %>%
mutate(d = as.numeric(d),
nuname = factor(a$x$edges$from,
levels = unlist(data$name))) %>%
arrange(nuname) %>%
select(d) %>% unlist(use.names = F)
# [1] 11 5 2 8 7 6 10 14 15 4 12 9 13 3 1
V(graph)$name = data$label = paste0(df2, "\n", data$name)
a = visIgraph(graph)
m_1 = 1
m_2 = 23.6
a = toVisNetworkData(graph) %>%
c(., list(main = list(text = paste0("Trip ", m_1, " : "),
style = "font-family: Georgia; font-size: 100%; font-weight: bold; text-align:center;"),
submain = list(text = paste0(m_2, "KM"),
style = "font-family: Georgia; font-size: 100%; text-align:center;"))) %>%
do.call(visNetwork, .) %>%
visInteraction(navigationButtons = TRUE) %>%
visIgraphLayout(layout = "layout_in_circle") %>%
visEdges(arrows = 'to') %>%
visOptions(width = "100%", height = "80%", autoResize = T)
a[["sizingPolicy"]][["knitr"]][["figure"]] <- FALSE
y = x = w = v = u = t = s = r = q = p = o = n = m = l = k = j = i = h = g = f = e = d = c = b = a
```
多选框
在最后一个代码块和下一个代码块之间是下一部分的位置。这将创建多选框所在的左列。 （这不在代码块中。）
Column {data-width=200}
-----------------------------------------------------------------------
### Select Options
You can select one or more options from the list.
否构建选择框并附加将触发更改的功能。这部分需要修改。 在此处命名用户在屏幕上看到的选项。（此代码中为letters[1:25]。）
您的对象名称不必必须与您在此处的名称相匹配。不过，它们确实需要按相同的顺序排列。
```{r selectiver}
tagSel <- rpgSelect(
"selectBox", # don't change this (connected)
"Selections:", # visible on HTML; change away or set to ""
c(setNames(1:25, letters[1:25])), # left is values, right is labels
multiple = T # all multiple selections
) # other attributes controlled by css at the top
tagSel$attribs$class <- 'select select--multiple' # connect styles
tagSel$children[[2]]$attribs$class <- "mutli-select" # connect styles
tagSel$children[[2]]$attribs$onchange <- "getOps(this)" # connect the JS function
tagSel
```
网络图
然后在上一个chunk和下一个chunk之间（不在一个chunk中）：
Column
-----------------------------------------------------------------------
<div class="containIt">
现在调用你的图表。
```{r notNow, include=T}
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
p
q
r
s
t
u
v
w
x
y
```
在该块之后关闭 div 标签：
</div>
最终块：Javascript
这开始时很好很整洁......但经过大量的试验和错误 - 所见即所得。
在此过程中，有效的评论也逐渐消失。如果有关于什么做什么的问题，请告诉我。
如果您在 R Markdown 中运行该块（在“源”窗格中），该块将不会做任何事情。要执行JS，你必须knit。
```{r pickMe,results='asis',engine='js'}
//remove inherent knitr element-- after using mutlti-select starts harboring space
byeknit = document.querySelector('#column-1 > div.containIt > div.knitr-options');
byeknit.remove(1);
// Reset Sizing of Widgets
h = document.querySelector('#column-1 > div.containIt').clientHeight;
w = document.querySelector('#column-1 > div.containIt').clientWidth;
hw = h * w;
cont = document.querySelectorAll('#column-1 > div.containIt > div');
newHeight = Math.floor(Math.sqrt(hw/cont.length)) * .85;
for(i = 0; i < cont.length; ++i){
cont[i].style.height = newHeight + 'px';
cont[i].style.width = newHeight + 'px';
cn = cont[i].childNodes;
if(cn.length > 0){
th = cn[0].clientHeight + cn[1].clientHeight;
console.log("canvas found");
mb = newheight - th;
cn[5].style.height = mb + 'px'; //canvas control attempt
}
}
function resizePlease(count) { //resize plots based on selections
// screen may have resized**
h = document.querySelector('#column-1 > div.containIt').clientHeight;
w = document.querySelector('#column-1 > div.containIt').clientWidth;
hw = h * w; // get the area
// based on selected count** these should fit---
// RStudio!
newHeight = Math.floor(Math.sqrt(hw/count)) * .85;
for(i = 0; i < graphy.length; ++i){
graphy[i].style.height = newHeight + 'px';
graphy[i].style.width = newHeight + 'px';
gcn = graphy[i].childNodes;
if(cn.length > 0){
th = gcn[0].clientHeight + gcn[1].clientHeight;
mb = newHeight - th;
gcn[5].style.height = mb + 'px'; //canvas control attempt
canYouPLEASElisten = graphy[i].querySelector('canvas');
canYouPLEASElisten.style.height = mb + 'px'; //trigger zoom extent!!
canYouPLEASElisten.style.height = '100%';
}
}
}
// Something selected triggers this function
function getOps(sel) {
//get ref to select list and display text box
graphy = document.querySelectorAll('#column-1 div.visNetwork');
count = 0; // reset count of selected vis
// loop through selections
for(i = 0; i < sel.length; i++) {
opt = sel.options[i];
if ( opt.selected ) {
count++
graphy[i].style.display = 'block';
console.log(opt + "selected");
console.log(count + " options selected");
} else {
graphy[i].style.display = 'none';
}
}
resizePlease(count);
}
```
开发者工具控制台
如果您转到开发人员工具控制台，您将能够看到在做出选择时选择了多少选项以及选择了哪些选项。这样，如果有一些奇怪的事情，比如逆序（我怀疑但无法验证），你会看到你可能预期的发生或没有发生的事情。无论您在哪里看到console.log，都会向控制台发送一条消息，以便您查看正在发生的事情。
仪表板颜色
如果背景中有任何颜色、自定义或其他您想要的颜色，请告诉我。我也可以在这部分提供帮助。目前，仪表板的颜色是默认颜色。