sankey very small with firefox #97
Comments
|
I am seeing the same issue in Chrome, Firefox, and Safari when running from a shiny-server instance. This does not show up when the app is started in RStudio. It looks like the issue is related to how the viewbox is calculated here: The app I'm using modifies the data used to generate the diagram. Sometimes this ends up fine, other times it completely breaks the viewbox calculations and ends up with a tiny diagram. Removing the viewbox attribute completely solved the issue for me, but lost the dynamic resizing when changing the browser window size. I'm going to try to track down the problem with the calculations, but may just stick with my fix of not using the viewbox at all. |
|
I'm wondering if this might be a race condition and possibly related to this StackOverflow. Unfortunately, I can't reproduce these on my side, so I'm not sure how to debug. |
|
Can you update to the github version of Shiny and htmlwidgets to make sure these don't cure the problem? I don't remember any changes that would have addressed this problem, but at least we will be able to eliminate this as a potential source of the problem. |
|
Thinking through this, are there cycles in your network? We added support for cycles in Sankey that could potentially have introduced a regression. |
|
For reference, this is the code I am using to test. |
|
I upgraded to the latest github versions of htmltools, shiny, and networkD3, but I am still seeing some strange behavior. To clarify, this only shows up when I run the code from the a shiny server instance. Not when I run it out of rstudio. I am running this on the latest shiny-server v 1.4.2 built from github's master branch. The test code you posted seems to jump around on every refresh. The cycles render fine, but move up and down a lot. The energy diagram grows and shrinks. This is what I see for the energy diagram. Shrinking the browser window seems to exacerbates the issue. The initial code that I've got usually ends up with a large negative x offset, which I think is where the shrinking comes from. |
|
I tried @timelyportfolio code on my apple mac. If I display in the browser, and the browser is Firefox, I have the problem (but while the two viz are smaller, they do not seems as small as a single viz would looks like). I do not seem to have the problem with Chrome though. |
|
same problem when rendering a Sankey from R Markdown to html: tiny on firefox, fine on chrome and safari... is there a workaround to get to a normal size in firefox...? |
|
Pretty sure this is caused by the library(htmlwidgets)
library(networkD3)
library(magrittr)
nodes = data.frame("name" = factor(as.character(1:9)),
"group" = as.character(c(1,2,2,3,3,4,4,4,4)))
links = as.data.frame(matrix(byrow = T, ncol = 3, c(
0, 1, 1400,
0, 2, 18600,
1, 3, 400,
1, 4, 1000,
3, 5, 100,
3, 6, 40,
3, 7, 20,
3, 8, 4
)))
names(links) = c("source","target","value")
sn <- sankeyNetwork(Links = links, Nodes = nodes, Source = "source",
Target = "target", Value = "value", NodeID = "name",
NodeGroup = "group", fontSize = 12, sinksRight = FALSE)
htmlwidgets::onRender(sn, 'document.getElementsByTagName("svg")[0].setAttribute("viewBox", "")') |
|
thank you so much! it works great for 1 chart, but i'm having trouble with multiple charts, despite adding the onRender and updating the number in square brackets each time... any idea how to fix this? Here's my code using your data (only the 1st chart renders): same chart with sinksRight = FALSE: |
|
You'll have to provide a full, reproducible example, because that works for me. |
|
and technically, these issues are not meant to be used as a support forum, so it may be better to create a question on Stack Overflow |
|
sorry - i'll add it to the existing thread on stackoverflow. |
|
I basically have the same thing happening as well. I have a Sankey Network I'm using with the R blogdown package. And my Sankey Network also renders fine in Chrome and IE11, but is very small in Firefox. My StackOverflow question can be seen here. I tried @cjyetman previous solution but it doesn't appear to work in my case. |
|
@jhuntergit can you put a reprex here to match your comment please? If it’s not the same issue as here, which it sounds like it might not be, then we should open a new issue to figure it out. |
|
I think it's the same issue. The only difference is I'm running this code as an R blogdown site. Here is the code that generates a small Sankey Network, but only in Firefox. In Chrome and IE this same Sankey Network is normal sized. |
|
this works for me (macOS 10.14.3, Firefox 65.0.1) ---
title: "Data Analysis"
date: "2019-01-01T18:00:00-09:00"
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
library(tidyverse)
library(blogdown)
library(networkD3)
```
Lorem ipsum dolor sit amet.
```{r sankey, echo=FALSE, error=FALSE, message=FALSE, warning=FALSE}
source <- c("A", "A", "B", "C", "D", "D", "E", "E")
target <- c("D", "E", "E", "D", "H", "I", "I", "H")
values <- c(1, 22, 5, 5, 5, 10, 10, 10)
nodes <- data.frame(name = unique(c(source, target)))
links <- data.frame(source = match(source, nodes$name) - 1,
target = match(target, nodes$name) - 1,
value = values)
sn <- sankeyNetwork(Links = links, Nodes = nodes, Source = "source",
Target = "target", Value = "value", NodeID = "name",
units = "unitX", fontSize = 12, nodeWidth = 20)
htmlwidgets::onRender(sn, 'document.getElementsByTagName("svg")[0].setAttribute("viewBox", "")')
``` |
|
@jhuntergit can you attach the generated HTML file that you get from running my example code above (the version that has the fix that works on my computer). I'll test if your generated HTML code works on my machine as expected in Firefox and/or if it's the same as the HTML generated on my machine. If our HTML files are the same, then yeah, unfortunately it's a difference between OS and browser environments, which I can't easily investigate. Otherwise, there must be some reason you're getting a different HTML output than I am using the same code. |
|
Will do. I just need to put the request on pause for the next week or so. Currently the site only exists when I serve it through blogdown and R Studio. The static HTML files don't display properly unless served via blogdown within R Studio. When I deploy the site soon, I'll also grab the static HTML and attach here and |
|
@jhuntergit thanks for your willingness, but please do not attach a page from your website here. That doesn’t have any relevance here. Only attach the HTML output from running precisely the above Rmd code, no more, no less. Anything more/other than that will only complicate things and make me waste time investigating it. |
|
@cjyetman I can do that. Do you want the output from my R console? That is simply the block shown below. As I'm building my website I'm serving it locally using the R package blowdown. Or the HTML output I'd get from right clicking and |
|
Definitely don’t want the R console output. Just one HTML file. Still looks like you’re trying to show me your webpage. I don’t want that. I want the output from my example. |
|
@cjyetman I determined what my issue is. I can run your code block above and it works exactly as expected, BUT, only in isolation. If you look at the same R chunk below, except I added a "radial network" chunk, which neutralizes your Try and run this code chunk and you'll discover Firefox makes the Sankey Network small again. Why does the "radial network" chunk neutralize your solution? And how do I work around this? Yes, I need to keep the radial network in this R Markdown document. Thanks *and sorry I can't really get this complete *.Rmd file to format properly on this Github forum, if you copy paste the following into R Studio, then select all, then |
|
Great, thanks. I’m on vacation for the next 10 days or so, but this reduced/minimized example is probably exactly what I need to figure it out. |
|
Without being able to try it out myself, I can make a guess already that there should be a Also please do not refer to the plot produced by |
|
@cjyetman yes - right again! I stepped up |
|
I encountered this same problem today, here's how I fixed it: Put this code in your Rmd somewhere to loop through and set all the svg's viewBox = null.
|
|
Just be aware that... htmlwidgets::onStaticRenderComplete('$.each( document.getElementsByTagName("svg"), function( index, value ){value.setAttribute("viewBox", null);});')requires jQuery and removes the viewBox from every SVG on the page, no matter what they are or where they came from. My currently preferred method to do this is to use onRender(sn, 'function(el) { el.querySelector("svg").removeAttribute("viewBox") }')That can be done on each htmlwidget necessary, specifically. For example, using an example from above... library(networkD3)
library(shiny)
library(htmlwidgets)
# simple network with cycles
net_cycles <- list(
links = data.frame(
source = c(0,0,0,1,1,5),
target = c(1,2,3,4,5,0),
value = 10
),
nodes = data.frame(
name = letters[1:6]
)
)
URL <- paste0("https://cdn.rawgit.com/christophergandrud/networkD3/",
"master/JSONdata/energy.json")
Energy <- jsonlite::fromJSON(URL)
ui <- fluidPage(fluidRow(
column(6,sankeyNetworkOutput("sankey",height=300)),
column(6,sankeyNetworkOutput("sankey2",height=300))
))
# notice how few arguments we need now
# some output but not the nice output I expect
server <- function(input,output,session){
output$sankey <- renderSankeyNetwork({
invalidateLater(1000)
sn <- sankeyNetwork(net_cycles$links, net_cycles$nodes, Value = "value")
onRender(sn, 'function(el) { el.querySelector("svg").removeAttribute("viewBox") }')
})
output$sankey2 <- renderSankeyNetwork({
invalidateLater(1000)
sn2 <- sankeyNetwork(Links = Energy$links, Nodes = Energy$nodes, Source = "source",
Target = "target", Value = "value", NodeID = "name",
units = "TWh", fontSize = 12, nodeWidth = 30)
onRender(sn2, 'function(el) { el.querySelector("svg").removeAttribute("viewBox") }')
})
}
shinyApp(ui,server) |
|
I wanted to add my thanks to @cjyetman and @gdmcdonald. The viewBox property is definitely the issue at hand, and this was the only solution I found to fix it at render. For completeness, I'll add that if you're saving a stand-alone network to a .HTML file, you can do something like this to take advantage of the fix: |
I have a simple shiny app with a sankey chart. It works on all browsers, but in Firefox is incredibly small to the point of been unusable. Could it be a recent regression?
Mozilla Firefox ESR 38.4.0 on Centos 7. I've given below a snippet of the code and my sessionInfo() details.
I've tried to use height and width (see below) as a way to avoid the issue with no luck.
The text was updated successfully, but these errors were encountered: