在 Squarespace 上托管 d3.js 可视化答案

【问题标题】：Hosting d3.js visualizations on Squarespace在 Squarespace 上托管 d3.js 可视化
【发布时间】：2014-07-14 00:41:04
【问题描述】：

我最近看到两篇博文（1、2）详细介绍了在 Squarespace 上实现 d3.js 可视化的方法。我有兴趣将交互式网络可视化上传到我的 Squarespace 网站，因此我尝试按照这些博客文章中的说明进行操作，但似乎无法显示任何可视化。

这是我的简要工作流程。首先，我按照Neal Caren's site 上的说明下载了一些数据，并使用 Python 的 networkx 包的 d3_j3 插件创建了一个共引网络可视化。在该站点上的测试数据上运行该站点上的脚本会生成一个 cites.js 文件、一个 cites.json 文件和一个 cites.html 文件，并将这些文件中的每一个放在一个包含子目录 d3 的目录中，其中d3.js、d3.geom.js、d3.layout.js 和 force.css 位于。如果我双击 cites.html 文件，我会在浏览器窗口中看到所需的可视化。（Here 是前面提到的压缩目录。）

问题是我似乎无法在 Squarespace 上加载可视化。在 Toke Frello 的博文之后，我修改了 cites.js 文件的第 5 行，使其变为：

var vis = d3.select(".sqs-block-content")

然后我修改了该文件的第 10 行，使其变为可读：

d3.json("/s/cites.json", function(json) {

（Here's 修改后的文件。）然后我将 d3.js——连同 cites.js、cites.json、d3geom.js 和 d3layout.js——上传到我网站上的 /s/ 目录，转到博客--> 高级--> 发布博客项目代码注入并插入：

<script src="/s/d3.js"></script>。

最后，我去了我的博客，在一个旧页面上创建了一个新的代码块，使用下拉菜单将该块识别为 html 代码，然后输入：

<script type="text/javascript" src="/s/d3.js"></script>
<script type="text/javascript" src="/s/d3geom.js"></script>
<script type="text/javascript" src="/s/d3layout.js"></script>
<script type="text/javascript" src="/s/mod_cites.js"></script>

我保存了该页面并尝试在浏览器中查看它，但我只看到一个大的白色矩形，该可视化项应该出现在该矩形中。如果有人可以提供有关我可能会尝试使可视化出现的步骤的任何见解，我将不胜感激。

附： Squarespace 自动将 d3.geom.js 重命名为 d3geom.js，并自动将 d3.layout.js 重命名为 d3layout.js。我似乎无法阻止这种重命名。

【问题讨论】：

您是否有指向 SquareSpace 上出现故障的博客文章的链接？这听起来像是您需要查看 Chrome's Developer Tools 中的错误控制台才能解决的问题，而且我没有 SquareSpace 站点来测试 .zip 文件。
非常感谢您的回复，@WillAngley！以下是博客文章的链接：douglasduhaime.com/blog/calling-mallet-from-python 如果我尝试使用 Chrome 的开发者工具诊断情况，我会寻找什么样的东西？

标签： javascript python json d3.js squarespace

【解决方案1】：

一年半后，我想出了一个相当简单的方法来做到这一点。由于 SquareSpace 将 .json 文件上传到显然不为传出资产提供 CORS 标头的随机服务器（截至 2015 年底），因此需要将相关的 .json 文件上传到启用 CORS 标头的可靠服务器。为此，我使用 Amazon Web Service 的 S3。使用 Amazon cli，可以使用以下命令将文件上传到存储桶：

aws s3 cp dirToCopy/ s3://myBucketName --content-type application/json --acl public-read

然后可以从 Squarespace 的 js 应用程序（例如 d3.js）调用dirToCopy 中的文件。

【讨论】：

【解决方案2】：

当您希望内容所在的站点上显示空白区域时，您应该查看开发人员工具中的网络跟踪，并查看控制台是否有页面错误。以下是这些工具的屏幕截图，显示了错误的根本原因：

在您的情况下，SquareSpace 正在尝试从 https://static.squarespace.com 提供您的 JSON 数据，而您在 http://douglasduhaime.com 上运行的可视化脚本无法从中加载数据。

我不确定如何让 SquareSpace 在不重写其 URL 的情况下托管 .json 文件。在他们的留言板上有几个open questions 对此进行了讨论，我认为您可能需要通过电子邮件发送给 SquareSpace 支持以寻求答案。

我的使用 SquareSpace 的朋友在需要时获得了很好的支持。

【讨论】：