在Squarespace上托管d3.js可视化

Question

我最近发现了两篇博文（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文件，我会在浏览器窗口中看到所需的viz。 （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 /目录网站，去了博客 - ＆gt;高级 - ＆gt;发布博客项目代码注入和插入：

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

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

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

Answer 1

如果空白区域显示在您期望内容的网站上，则应查看“开发人员工具”中的网络跟踪以及控制台中的页面错误。以下是这些工具的屏幕截图，显示了错误的根本原因：

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

我不确定如何让SquareSpace托管.json文件而不重写其URL。他们的留言板上有几个open questions有关此问题，我想您可能需要通过电子邮件向SquareSpace支持部门寻求答案。

我的SquareSpace使用的朋友在他们需要时有很好的支持经验。

Answer 2

一年半之后，我发现了一种相当简单的方法。由于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

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

Answer 3

您可以使用vida.io中的embeddable d3.js解决方案。例如：

https://vida.io/documents/WgBMc4zDWF7YpqXGR

嵌入代码是：

<iframe src="http://embed.vida.io/documents/WgBMc4zDWF7YpqXGR" width="120" height="145" seamless frameBorder="0" scrolling="no"/>

免责声明：我在vida.io工作。