Search code examples
rd3.jsknitrhtmlwidgetsflexdashboard

Multi-page Flex Dashboard plots with incorrect zoom levels

EDIT It appears the issue is related to the lack of a 'resize' method in NetworkD3: https://github.com/rstudio/flexdashboard/issues/68#issuecomment-228521468

I'm encountering an issue when I create 2 SankeyNetwork plots and wish to display them on separate pages of a Flex Dashboard.

The first plot loads on the first page with no issue - looking exactly as it should.

However, when I flip to the second page, the second SankeyNetwork plot is tremendously zoomed in - making it unreadable. Clicking 'refresh' automatically fixes the plot - bringing it back to it's correct perspective. Then - when I click back to the first page - that plot is zoomed in in the same manner.

It doesn't appear to matter which plot I place on the first or second pages... Is there some sort of caching setting I need to alter?

Zoomed in Plot on 2nd page

Plot after right clicking and selecting 'Refresh'

Edit Here's example code - created in a FlexDashboard template in RStudio and leveraging the SankeyNetwork example provided by the NetworkD3 creators. In this

---
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
```
Solution

  • I believe this pull request should partially solve the problem. Please test and verify. Unfortunately, the solution requires some tradeoffs. I tried to discuss those in the pull request, but in general my opinion is that the non-flexdashboard context should prevail, so I have left the viewBox resize mechanism in place and will only render if height or width is 0. Thanks for the prompting. Hope this works ok for you.

    Here is a live example.