在Squaresp上托管d3.js可视化

Question

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

下面是我的工作流程。首先，我按照Neal Caren's site上的说明下载一些数据，并使用针对Python networkx包的d3_j3插件创建一个共引网络可视化。在该站点上对该站点上的测试数据运行该脚本将生成一个cites.js文件，acites.json文件，和cites.html文件，并将这些文件放入包含子目录d3的目录中，其中d3.js，d3。geom.js公司，第3天。布局.js，和强制.css位于。如果我双击cites.html文件，我在浏览器窗口中看到所需的viz。（Here是上述压缩格式的目录。）

问题是我似乎无法将可视化加载到Squarespace上。在Toke Frello的博客文章之后，我修改了cites.js要使其读取的文件：

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

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

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

（Here's修改后的文件。）然后我上传了d3.jscites.js, cites.json，第3天geom.js公司和d3布局.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>

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

p.S.Squarespace自动更名为d3。geom.js公司至d3geom.js公司，并自动重命名为d3。布局.js至d3布局.js. 我似乎无法阻止这个更名。在

Answer 1

一年半后，我想出了一个相当简单的方法。因为SquareSpace将.json文件上载到显然是随机的服务器（截至2015年底），这些服务器没有为传出资产提供CORS头，因此需要将相关的.json文件上载到支持CORS头的可靠服务器上。我使用amazonweb服务的S3。使用Amazon cli，可以使用以下命令将文件上载到存储桶：

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。他们的留言板上有几个openquestions，我想你可能需要给SquareSpace的支持人员发电子邮件以获得答案。在

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