缩放级别不正确的多页 Flex Dashboard 图

Question

EDIT 问题似乎与 NetworkD3 中缺少 'resize' 方法有关：https://github.com/rstudio/flexdashboard/issues/68#issuecomment-228521468

我在创建 2 个 SankeyNetwork 图并希望将它们显示在 Flex 仪表板的不同页面上时遇到问题。

第一张图毫无问题地加载到第一页 - 看起来完全符合预期。

但是，当我翻到第二页时，第二个 SankeyNetwork 图被极大地放大了 - 使其不可读。单击 'refresh' 会自动修复情节 - 将其恢复到正确的视角。然后 - 当我点击回到第一页时 - 该图以相同的方式放大。

我将哪个情节放在第一页或第二页似乎无关紧要...是否需要更改某种缓存设置？

编辑这是示例代码 - 在 RStudio 的 FlexDashboard 模板中创建，并利用 NetworkD3 创建者提供的 SankeyNetwork 示例。在这个

---
title: "Example"
output: 
  flexdashboard::flex_dashboard
---
Page 1
==================
```{r setup, include=FALSE}
library(flexdashboard)
library(networkD3)

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

### Page 1 {data-width=650}

```{r}
  s1

```

Page 2
==================

### Page 2 {data-width=350}

```{r}
s1
```

Answer 1

我怀疑这是 flexdashboard 的问题，因为我遇到了同样的问题。参见 gist

更新：这是由于 htmlwidget resize 函数没有被正确实现。（我正在尝试修复小部件）

Answer 2

当我使用新列并设置大小时，这个问题就消失了。我打赌这会解决你的问题

示例：

列{data-width=650}

Answer 3

我能够按照顶部 post 此处描述的步骤解决我的问题：

https://github.com/christophergandrud/networkD3/issues/122#issuecomment-228551872

注释掉sankeyNetwork.js中的viewBox代码，取消resize函数代码的注释

Answer 4

我相信 pull request 应该可以部分解决问题。请测试验证。不幸的是，该解决方案需要进行一些权衡。我试图在 pull request 中讨论那些，但总的来说我的观点是非 flexdashboard 上下文应该占上风，所以我保留了 viewBox 调整大小机制并且仅在 height 或width 为 0。感谢提示。希望这对你有用。

这里是live example.

缩放级别不正确的多页 Flex Dashboard 图

Multi-page Flex Dashboard plots with incorrect zoom levels

r

d3.js

knitr

htmlwidgets

flexdashboard

列{data-width=650}