D3.js 脱机访问d3js可视化

全部,

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

我一直在使用Plunker网站创建公司网络的可视化。其中一个非常类似于Mike Bostock的分层边缘绑定图：。我有一个index.html文件，它实际上与他的文件相同，但我的.json文件有不同的数据。这是我的“plunk”中仅有的两个文件

我想在一次会议上展示这种可视化效果，但我不确定如何在会议期间不登录Plunker，如果互联网连接不好怎么办

有没有办法离线访问这些可视化效果？我是否可以将它们保存到thumb驱动器中，并在需要时加载它们？也许将它们导入Latex Beamer演示文稿？如果这已经被讨论过或者是琐碎的，请给我指出正确的方向

注意：我曾尝试在Plunker中右键单击图像并执行“另存为”，但虽然生成的html文件看起来确实像我的图像，但它没有我需要的相同交互功能（鼠标悬停时突出显示链接）

谢谢你的帮助

---

Dan

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

不过，我是从外部源加载d3脚本的，chrome并不介意

您可以在html文件中包含d3脚本。那你就不需要上网了。但我从来没有测试过，所以请确保在演示之前可以离线完成

编辑：

---

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

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

不过，我是从外部源加载d3脚本的，chrome并不介意

您可以在html文件中包含d3脚本。那你就不需要上网了。但我从来没有测试过，所以请确保在演示之前可以离线完成

编辑：

---

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

你好，奥利弗，非常感谢你的回复。你能说一下“数据是如何作为变量包含在文件中的”吗？我有一个.json文件，里面有我所有的数据，我不知道如何把它放到html文件中。一个笨手笨脚的复制粘贴不起作用…当前的代码是：d3.json（“alldrop_may24.json”），func[代码继续]。我尝试过包含一个文件路径（使用正斜杠和反斜杠），复制json数据并在引号之间粘贴，等等。或者，我可以使用浏览器以外的其他工具查看html输出吗？如果它们是基于这些安全问题构建的，我不介意使用其他程序查看可视化。可能是IDE？再次感谢！我有3个变量作为json数组，var locations=[…json]；等等，然后我没有使用d3.json（函数…），而是使用了数据变量的d3函数：var locations=svg.append（“g”）.attr（“class”，“locations”）.selectAll（“circle”）.data（locations）…；很抱歉，这有点混乱。我没有使用IDE，我尝试了一个，但发现它有点慢。谢谢你，奥利弗。这非常有用！嗨，奥利弗，非常感谢你的回复。你能说更多关于“数据作为变量包含在文件中”的内容吗？我有一个.json文件，里面有我所有的数据，我不知道如何把它放到html文件中。一个笨拙的复制粘贴不起作用…目前的代码是：d3.json（“alldrop_may24.json”），func[代码继续]。我试着包括一个文件路径（使用正斜杠和反斜杠），复制json数据并在引号之间粘贴，等等。或者，我可以使用浏览器以外的其他工具查看html输出吗？如果它们是基于这些安全问题构建的，我不介意使用其他程序查看可视化。可能是IDE？再次感谢！我有3个变量作为json数组，var locations=[…json]；等等，然后我没有使用d3.json（函数…）而是使用d3函数和数据变量：var locations=svg.append（“g”）.attr（“class”，“locations”）.selectAll（“circle”）.data（locations）…；抱歉，这有点乱。我没有使用IDE，我尝试了一个，但发现它有点慢。谢谢你，Oliver。这非常有用！

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) });