脱机访问d3js可视化

Question

所有

一个快速道歉的序言：我对编码，html，d3.js等很陌生。

我一直在使用Plunker网站创建公司网络的可视化。一个与Mike Bostock的Hierarchical Edge Bundling图非常相似：https://bl.ocks.org/mbostock/7607999。我有一个index.html文件，它几乎与他的相同，但我的.json文件有不同的数据。这些是我“plunk”中唯一的2个文件。

我想在会议上展示这个可视化但是我不确定如何在会话期间没有登录Plunker这样做，如果互联网连接不好怎么办？...

有没有办法离线访问这些可视化效果？我可以以某种方式将它们保存到拇指驱动器并在需要时加载它们吗？也许将它们导入Latex Beamer演示文稿？如果这已经讨论过或者是微不足道的，请指出我正确的方向。

一个注意事项：我尝试右键单击Plunker中的图像并执行“另存为”，但是生成的html文件看起来像我的图像，但它没有我需要的相同交互功能（鼠标悬停期间发生的链接的突出显示）。

感谢您的帮助。

丹

Answer 1

当我测试d3可视化时，我只是用chrome中的js打开普通html文件，数据作为变量包含在文件中，因为浏览器不会从计算机上的文件加载数据（安全问题） ）...

然而，我正在从外部源加载d3脚本，而Chrome并不介意。

您可以在html文件中包含d3脚本。那你就不需要上网了。但我从未对此进行过测试，因此请确保您可以在演示前离线完成。

编辑：

var locations =
[
{"name": "Cochlear", "id": 1},
{"name": "DCN", "id": 2},
{"name": "AVCN", "id": 3},
{"name": "PVCN", "id": 4}
];
var locCircles = svg.append("g")
.attr("class", "locations")
.selectAll("circle")
.data(locations)
.enter()
.append('circle')
.attr('cx', function(d) { return xPoint(d.id) })//centre locations around xPoints
.attr('cy', height/2)
.attr('r', 55)
.attr('fill', function(d) { return color(d.id) });

这在d3强制样式图中创建了圆圈。