在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>

我保存了页面，尝试在浏览器中查看，但只看到一个大白色的矩形，原本应该显示可视化的地方什么都没有。如果有人能提供一些建议，告诉我该怎么做才能让可视化显示出来，我会非常感激。

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

Answer 1

一年半后，我找到了一种相对简单的方法来解决这个问题。因为SquareSpace会把.json文件上传到一些看起来随机的服务器（截至2015年底），而这些服务器不提供CORS头信息，这意味着外部应用无法访问这些文件。所以，我们需要把相关的.json文件上传到一个可靠的服务器，并且这个服务器要支持CORS头信息。我使用的是亚马逊的S3服务。通过亚马逊的命令行工具，可以用类似下面的命令把文件上传到一个存储桶：

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

然后，就可以从SquareSpace的js应用（比如d3.js）中调用dirToCopy里的文件了。

Answer 2

当你在网站上看到空白区域，而你本来期待看到内容时，首先要检查一下开发者工具中的网络追踪和控制台，看看有没有页面错误。下面是这些工具的截图，显示了错误的根本原因：

在你的情况下，SquareSpace试图从https://static.squarespace.com提供你的JSON数据，但你在http://douglasduhaime.com上运行的可视化脚本无法加载这些数据。

我不太确定如何让SquareSpace托管这个.json文件而不改变它的URL。关于这个问题，SquareSpace的论坛上有几个开放的问题，我觉得你可能需要给SquareSpace的支持团队发邮件询问一下。

我的一些使用SquareSpace的朋友在需要帮助时，和他们的支持团队的经历都很好。