最近、Squarespace で d3.js ビジュアライゼーションを実装する方法を詳しく説明している2つのブログ投稿 ( 1、2 ) に出会いました。インタラクティブなネットワーク ビジュアライゼーションを自分の 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 ファイルをダブルクリックすると、目的の Viz がブラウザー ウィンドウに表示されます。（これは、 zip形式の前述のディレクトリです。）
問題は、ビジュアライゼーションを 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/ ディレクトリにアップロードし、Blog に移動しました。 > 高度な --> 投稿ブログ アイテム コード インジェクションと挿入:
<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 が表示されるはずの場所に大きな白い四角形しか表示されません。ビジュアライゼーションを表示させるための手順について誰かが洞察を提供できる場合は、非常に感謝しています。
PS Squarespace は、自動的に d3.geom.js を d3geom.js に名前変更し、d3.layout.js を d3layout.js に自動的に名前変更しました。この名前の変更を防ぐことはできないようです。
