离线访问 d3js 可视化

Question

全部，

一个简短的道歉序言：我对编码、html、d3.js 等非常陌生。

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

我想在会议上展示这个可视化，但不确定如何在会议期间不登录 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 力样式图中创建了圆圈。