【发布时间】：2015-12-10 20:43:09
【问题描述】：
我正在关注一个关于集成 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 和 Google Chrome），它是图像的停滞版本。
我会亲自给作者发电子邮件。但该联系信息不可用。它是一个简单的教程，所以我希望它是一个简单的解决方案！
我对这个交互式组件很陌生。但是，我一步一步地按照说明进行操作，并且不确定我可能忽略了什么。非常感谢任何与解决此问题相关的支持或信息！
【问题讨论】：
-
生成的文档是什么样的？是
<svg> all the plot stuff </svg> <script> all that javascript </script>吗？ -
@Mark 感谢您的回复！我得到的唯一输出是 plot1.svg 文件。如果我在 Rstudio 中打开它，我看到它的一般格式是 。搜索后，我没有看到任何 .
-
您选择 d3 有什么特别的原因吗？还有另一个有趣的选择，例如喜欢htmlwidgets.org/showcase_plotly.html
-
@Mlavoie 感谢 cmets 和好问题（对不起我的延迟！）我实际上想要做的是创建一个交互式图，它是散点图和网络之间的东西：它在节点之间有边（网络），但每个节点都有一个特定的 x,y 位置（散点图）。我实际上首先尝试了 htmlwidgets！但似乎 htmlwidgets 不允许多个 geom (hrbrmstr.github.io/metricsgraphics)。所以，我被困在他们展示的美丽散点图中添加边缘 (hrbrmstr.github.io/metricsgraphics)。谢谢。
-
很高兴看到您找到我的帖子。抱歉，我花了这么长时间才找到它。听起来你找到了答案。还有很多有用的新工具可以让这变得更容易。为了将来参考，如果您看到类似 username.github.io/repo 的内容，您可以通过将其翻译为 github.com/username/repo 找到所有来源，然后提交问题或查找联系信息。在这种情况下github.com/timelyportfolio/gridSVG_intro。我还应该补充一点，这个特定的帖子是用
slidify创建的。现在我使用rmarkdown。
标签： r d3.js svg ggplot2 interactive