Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise

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
```
share|improve this question
    
Can you give us a reproducible example of this so that we have a better chance of being able to help? – Hack-R Jun 24 at 18:49
    
Sorry about that - added an example – MCharles Jun 24 at 20:18
    
Awesome! No worries. It takes long but adding reproducible examples pays off in more / better answers :) – Hack-R Jun 24 at 20:19
up vote 1 down vote accepted

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.

share|improve this answer
    
Thank you! this did work – MCharles Jul 2 at 16:06

I suspect this is an issue with flexdashboard as I am having the same problem. See gist

update: this is due to htmlwidget resize function not being properly implimented. (I'm trying to fix the widget)

share|improve this answer

when i use a new column and set the size this problem disappears. i bet this will solve your issue

example:

Column {data-width=650}

share|improve this answer

I was able to resolve my issue by following the steps described in the top post here:

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

comment out the viewBox code in sankeyNetwork.js, and un-comment the resize function code

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.