3

我最近遇到了两篇博文（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。我似乎无法阻止这种重命名。

4

2 回答 2

4

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

从 Python 调用 Mallet 错误截图

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

我不确定如何让 SquareSpace 在不重写其 URL 的情况下托管 .json 文件。他们的留言板上有几个关于此的未 解决问题，我认为您可能需要向 SquareSpace Support 发送电子邮件以获得答案。

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

于 2014-05-24T22:09:36.867 回答
3

所以一年半后，我想出了一个相当简单的方法来做到这一点。由于 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

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

于 2015-12-13T14:37:25.070 回答