r-在Firefox中使用多个sankeyNetwork(NetworkD3)编织标记时控制绘图大小

Question

这是一篇类似文章的后续文章。

我也有同样的问题，但当从R Markdown编织到HTML时。有了@CJYetman友好发布的解决方案，我可以为我的sankey获得正确的尺寸，但只是第一个。

我尝试添加onRender并每次更新方括号中的数字，但我一定做错了什么。以下是完整的R Markdown代码(只有第一张图表在编织成HTML时才会渲染(：

---
title: "test"
author: "CS"
date: "02/08/2018"
output:
html_document: default
pdf_document: default
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```
```{r}
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")
links
```
this chart works fine in firefox:
```{r}
sn1 <- sankeyNetwork(Links = links, Nodes = nodes, Source = "source", 
Target = "target", Value = "value", NodeID = "name", 
NodeGroup = "group", fontSize = 12)
htmlwidgets::onRender(sn1, 'document.getElementsByTagName("svg")[0].setAttribute("viewBox", "")')
```
but this one doesn't display at all when knitted:
```{r}
sn2 <- sankeyNetwork(Links = links, Nodes = nodes, Source = "source", 
Target = "target", Value = "value", NodeID = "name", 
NodeGroup = "group", fontSize = 12, sinksRight = FALSE)
htmlwidgets::onRender(sn2, 'document.getElementsByTagName("svg")[1].setAttribute("viewBox", "")')
```
and neither does this one:
```{r}
sn3 <- sankeyNetwork(Links = links, Nodes = nodes, Source = "source", 
Target = "target", Value = "value", NodeID = "name", 
NodeGroup = "group", fontSize = 12, sinksRight = FALSE)
htmlwidgets::onRender(sn3, 'document.getElementsByTagName("svg")[2].setAttribute("viewBox", "")')
```

Answer 1

1(只使用htmlwidgets::onRender()函数一次，否则不太清楚JavaScript何时运行，以及运行时会存在或不存在哪些其他元素。

2( 在htmlwidgets::onRender()函数中(理想情况下，在渲染最后一个sankeyNetwork时运行(，从每个渲染的sankeyNetworks中移除视框。

3( 为了使用htmlwidgets::onRender()函数运行多个JavaScript命令，请将所有命令封装在(JavaScript(函数中

---
title: "test"
author: "CS"
date: "02/08/2018"
output:
html_document: default
pdf_document: default
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```
```{r}
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")
links
```
this chart works fine in firefox:
```{r}
sn1 <- sankeyNetwork(Links = links, Nodes = nodes, Source = "source",
Target = "target", Value = "value", NodeID = "name",
NodeGroup = "group", fontSize = 12)
sn1
```
but this one doesn't display at all when knitted:
```{r}
sn2 <- sankeyNetwork(Links = links, Nodes = nodes, Source = "source",
Target = "target", Value = "value", NodeID = "name",
NodeGroup = "group", fontSize = 12, sinksRight = FALSE)
sn2
```
and neither does this one:
```{r}
sn3 <- sankeyNetwork(Links = links, Nodes = nodes, Source = "source",
Target = "target", Value = "value", NodeID = "name",
NodeGroup = "group", fontSize = 12, sinksRight = FALSE)
htmlwidgets::onRender(sn3, jsCode =
'function(){
document.getElementsByTagName("svg")[0].setAttribute("viewBox", "");
document.getElementsByTagName("svg")[1].setAttribute("viewBox", "");
document.getElementsByTagName("svg")[2].setAttribute("viewBox", "");
}')
```

---

更新2020.04.02

我目前最喜欢的方法是使用htmlwidgets::onRender专门针对传递的htmlwidget所包含的SVG，如下。。。

onRender(sn, 'function(el) { el.querySelector("svg").removeAttribute("viewBox") }')

然后可以根据需要专门对页面上的htmlwidgets进行处理，例如。。。

onRender(sn, 'function(el) { el.querySelector("svg").removeAttribute("viewBox") }')
onRender(sn2, 'function(el) { el.querySelector("svg").removeAttribute("viewBox") }')