在 Squarespace 上托管 d3.js 可视化

Question

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

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

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

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

然后我修改了该文件的第 10 行，使其显示为：

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

（这是修改后的文件。）然后我将 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>

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

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

Answer 1

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

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

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