14 svg interactive r ggplot2 d3.js
我正在关注集成ggplot2和d3的简单教程.我正在本教程网站(http://timelyportfolio.github.io/gridSVG_intro/)上专门研究方法2 .我试图复制交互式情节(这是该页面上的最后一个情节).
我使用了相同的语法,并将其插入到.R文件中,如下所示:
library(gridSVG)
library(ggplot2)
library(XML)
library(rjson)
set.seed(955)
dat <- data.frame(cond = rep(c("A", "B"), each=10), xvar = 1:20 + rnorm(20,sd=3), yvar = 1:20 + rnorm(20,sd=3))
g4 = ggplot(dat, aes(x=xvar, y=yvar)) + geom_smooth() + geom_point(shape=19, aes(color = cond), size=5)
g4
g4.svg <- grid.export("plot1.svg",addClasses=TRUE)
cat(saveXML(g4.svg$svg))
cat(
'<script> ourdata=',
rjson::toJSON(apply(g4$data,MARGIN=1,FUN=function(x)return(list(x)))),
'</script>'
)
cat(
'<script> dataToBind = ',
'd3.entries(ourdata.map(function(d,i) {return d[0]}))',
'</script>'
)
cat(
'<script>\n',
'scatterPoints = d3.select(".points").selectAll("use");\n',
'scatterPoints.data(dataToBind)',
'</script>\n'
)
cat('<script>\n',
'scatterPoints
.on("mouseover", function(d) {
//Create the tooltip label
var tooltip = d3.select(this.parentNode).append("g");
tooltip
.attr("id","tooltip")
.attr("transform","translate("+(d3.select(this).attr("x")+10)+","+d3.select(this).attr("y")+")")
.append("rect")
.attr("stroke","white")
.attr("stroke-opacity",.5)
.attr("fill","white")
.attr("fill-opacity",.5)
.attr("height",30)
.attr("width",50)
.attr("rx",5)
.attr("x",2)
.attr("y",5);
tooltip.append("text")
.attr("transform","scale(1,-1)")
.attr("x",5)
.attr("y",-22)
.attr("text-anchor","start")
.attr("stroke","gray")
.attr("fill","gray")
.attr("fill-opacity",1)
.attr("opacity",1)
.text("x:" + Math.round(d.value.xvar*100)/100);
tooltip.append("text")
.attr("transform","scale(1,-1)")
.attr("x",5)
.attr("y",-10)
.attr("text-anchor","start")
.attr("stroke","gray")
.attr("fill","gray")
.attr("fill-opacity",1)
.attr("opacity",1)
.text("y:" + Math.round(d.value.yvar*100)/100);
})
.on("mouseout", function(d) {
d3.select("#tooltip").remove();
});',
'</script>'
)
我从这个脚本得到的唯一输出是plot1.svg文件.但是,当我在浏览器中打开它时(尝试过Safari和谷歌浏览器),它是图像的停滞版本.
我会给作者发电子邮件.但该联系信息不可用.它本来是一个简单的教程,所以我希望它是一个简单的解决方案!
我对这个交互式组件很新.但是,我一步一步地遵循了指示,并且不确定我可能忽略了什么.任何与解决此问题相关的支持或信息都将非常感谢!
EDITS
所以,我最后安装了R来看看我原来的答案出错了.我很接近.我错过了一个saveXML电话,因为@ arvi1000指出我没有来源d3.这是一个完整的修复示例.我刚用R 3.2.3运行它,它会myAwesomePlot.html在你的工作目录中产生一个:
library(gridSVG)
library(ggplot2)
library(XML)
library(rjson)
set.seed(955)
dat <- data.frame(cond = rep(c("A", "B"), each=10), xvar = 1:20 + rnorm(20,sd=3), yvar = 1:20 + rnorm(20,sd=3))
g4 = ggplot(dat, aes(x=xvar, y=yvar)) + geom_smooth() + geom_point(shape=19, aes(color = cond), size=5)
# what does this line do? It writes the SVG to the file "plot1.svg"?
g4.svg <- grid.export("", addClasses=TRUE)
# create a valid html file
cat("<html><head><script src='http://d3js.org/d3.v3.min.js'></script></head><body>", file="myAwesomePlot.html")
# I'm assuming this gets the svg content and can write it to a file
cat(saveXML(g4.svg$svg), file="myAwesomePlot.html", append=TRUE)
cat(
'<script> ourdata=',
rjson::toJSON(apply(g4$data,MARGIN=1,FUN=function(x)return(list(x)))),
'</script>', file="myAwesomePlot.html", append=TRUE
)
cat(
'<script> dataToBind = ',
'd3.entries(ourdata.map(function(d,i) {return d[0]}))',
'</script>'
, file="myAwesomePlot.html", append=TRUE)
cat(
'<script>\n',
'scatterPoints = d3.select(".points").selectAll("use");\n',
'scatterPoints.data(dataToBind)',
'</script>\n'
, file="myAwesomePlot.html", append=TRUE)
cat('<script>\n',
'scatterPoints
.on("mouseover", function(d) {
//Create the tooltip label
var tooltip = d3.select(this.parentNode).append("g");
tooltip
.attr("id","tooltip")
.attr("transform","translate("+(d3.select(this).attr("x")+10)+","+d3.select(this).attr("y")+")")
.append("rect")
.attr("stroke","white")
.attr("stroke-opacity",.5)
.attr("fill","white")
.attr("fill-opacity",.5)
.attr("height",30)
.attr("width",50)
.attr("rx",5)
.attr("x",2)
.attr("y",5);
tooltip.append("text")
.attr("transform","scale(1,-1)")
.attr("x",5)
.attr("y",-22)
.attr("text-anchor","start")
.attr("stroke","gray")
.attr("fill","gray")
.attr("fill-opacity",1)
.attr("opacity",1)
.text("x:" + Math.round(d.value.xvar*100)/100);
tooltip.append("text")
.attr("transform","scale(1,-1)")
.attr("x",5)
.attr("y",-10)
.attr("text-anchor","start")
.attr("stroke","gray")
.attr("fill","gray")
.attr("fill-opacity",1)
.attr("opacity",1)
.text("y:" + Math.round(d.value.yvar*100)/100);
})
.on("mouseout", function(d) {
d3.select("#tooltip").remove();
});',
'</script>'
, file="myAwesomePlot.html", append=TRUE)
# close out file
cat("</body></html>", file="myAwesomePlot.html", append=TRUE)
原始答案
自从我完成任何R编程以来已经有一段时间了,但这些cat功能看起来并不合适.他们会写入标准输出,而不是写入文件.我的猜测是grid.export只写svg文件而其他一切都被删除了.我一眼就认为你打算运行这段代码:
R myRCode.R > outPutFile.svg
这样stdout就会重定向到一个文件中.
我尝试重新编译代码并将所有内容html明确写入文件:
library(gridSVG)
library(ggplot2)
library(XML)
library(rjson)
set.seed(955)
dat <- data.frame(cond = rep(c("A", "B"), each=10), xvar = 1:20 + rnorm(20,sd=3), yvar = 1:20 + rnorm(20,sd=3))
g4 = ggplot(dat, aes(x=xvar, y=yvar)) + geom_smooth() + geom_point(shape=19, aes(color = cond), size=5)
g4
// what does this line do? It writes the SVG to the file "plot1.svg"?
g4.svg <- grid.export("plot1.svg",addClasses=TRUE)
// create a valid html file
cat("<html><head></head><body>", file="myAwesomePlot.html")
// I'm assuming this gets the svg content and can write it to a file
cat(g4.svg$svg, file="myAwesomePlot.html")
cat(
'<script> ourdata=',
rjson::toJSON(apply(g4$data,MARGIN=1,FUN=function(x)return(list(x)))),
'</script>', file="myAwesomePlot.html"
)
// etc, rest of JavaScript
// close out file
cat("</body></html>", file="myAwesomePlot.html")
cat正如你所拥有的那样,在简单的R脚本中,只需输出到控制台,就像@Mark所说的那样.要解决1)你的最终html文档必须包含:<script src="http://d3js.org/d3.v3.min.js"></script>或等效文件.
要解决2),您可以使用Rmarkdown .Rmd文件并将所有内容放在一个块中.
在扩展名为.Rmd的文件中,使用以下行开始块:
```{r, echo=FALSE, results='asis', warning=FALSE, message=FALSE}
接下来,确保在此行中包含D3库:
cat('<script src="http://d3js.org/d3.v3.min.js"></script>')
然后添加上面的所有代码,然后结束块:
```
如果您在Rstudio中执行此操作,则可以点击"编织HTML".否则,您可以使用knitr::knit2html或rmarkdown::render从控制台或另一个.R脚本)