christophergandrud / christophergandrud/networkD3

Whitespace (viewBox) around sankeyNetwork exported with saveNetwork

Open
#218 3 comments 0 reactions 0 assignees View on GitHub
enhancement feature request sankeyNetwork viewbox
Dominant language
R
Stars
659
Forks
259
PR merge metrics
No merged PRs in 30d

Description

If I create any sankeyNetwork, export it as Html file, and open it in any browser, I see a substantial amount of whitespace around the graph. This makes it much smaller than the size in pixel I defined in the sankeyNetwork function and makes it terrible for use in documents or to be embedded as iframe.

Example:
```
library(networkD3)
library(magrittr)

URL <- paste0(
"https://cdn.rawgit.com/christophergandrud/networkD3/",
"master/JSONdata/energy.json")
Energy <- jsonlite::fromJSON(URL)
# Plot
sankeyNetwork(Links = Energy$links, Nodes = Energy$nodes, Source = "source",
Target = "target", Value = "value", NodeID = "name",
units = "TWh", fontSize = 12, nodeWidth = 30) %>%
saveNetwork(file = 'Net1.html')
```
If (e.g. by pressing F12 in Firefox) I look at the output, I can remove the whitespace by deleting the Viewbox property of the svg.

There seems to be no easy way to accomplish the same in the output html file.

The only workaround I found is to `saveNetwork()` with `selfcontained = FALSE`, remove the viewBox part in `sankeyNetwork.js`, and uncomment the resizing part above of the same file.

This works. But shouldn't this be the default behaviour, or at least easily accessible through options? After all, I'd expect that the html output is mostly exported to be embedded somewhere else. Also, exporting with the current default, the output is effectively much smaller than what it should be according to the `height' and 'width' parameters set in sankeyNetwork.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with saveNetwork() output and sankeyNetwork.js, comparing the generated SVG viewBox with the resizing code mentioned in the issue. Reproduce the example in a browser and verify that the exported graph uses the requested height and width without substantial surrounding whitespace, including when saved with default options.

Written by the indexing model from the issue text.

Assessment

Tech stack
d3js, r
Domain
data-visualization, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.