JSON-LDデータを可視化できるかと思ったが、できなかった。
jsonld-vis
jsonld-visはJSON-LDをグラフ描画するライブラリ。
ライブラリ
どうやらjsonld-visはd3.jsを使っているらしい。
HelloWorld
とにかく動かせる最小限のコードがほしい。jsonld-visのページを見たら以下のコードがあった。
import d3 from 'd3'; import jsonldVis from 'jsonld-vis'; jsonldVis(d3); d3.json('example.json', (err, data) => { if (err) return console.warn(err); d3.jsonldVis(data, '#graph', { w: 800, h: 600, maxLabelWidth: 250 }); });
d3.jsを使っている、というより、ほぼd3.jsしか使っていないようにみえる。
import
ところで、JavaScriptにimportシンタックスなんてあったっの？
こちらやこちらを参照した。感謝。正直よくわからないが、とにかく動くかどうか確かめたい。
動かない
<html lang="ja"> <head> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="hover.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script> <script type="text/javascript" src="./lib/jsonld-vis.js"></script> </head> <body> </body> </html>
SyntaxError: import declarations may only appear at top leve
importはファイル内の最上で、括弧の中に入れないようにすればいいのかな？
SyntaxError: modules are not implemented yet
モジュールが未定義だと。結局、HTMLの<script>タグで参照するしかないということか。
余計な手間が一つ増えただけに思える。でも、名前空間の重複を避けるなどの目的でモジュールという単位を扱うにはimportが必要ということなのかな？
というか、jsonld-vis.jsを読み込んだ時点でエラー出てるんだが……。
| エラー | 位置 |
|---|---|
| SyntaxError: modules are not implemented yet | jsonld-vis.js:5:19 |
d3.jsのバージョン差異でエラーが出ているとか？ならば実際に動作しているdemoからパクろう。
demoをパクる
こちらにdemoがある。ソースコードをローカルにコピーして再現させようとした。しかし、以下のエラーが出て動かせなかった。
NS_ERROR_DOM_BAD_URI: Access to restricted URI denied example.min.js:2577:0
2577行って長すぎ。と思ったら全体で10134行もあった。2577行目が以下。
request.send(data == null ? null : data);
request.sendは多分HTTPリクエストでもしているのだろう。
Google翻訳によると「制限されたURIへのアクセスが拒否されました」とのこと。ローカルからだと通信が制限されるのか？それとも、サーバからみた相対パスを渡しているせいで参照できないとか？
途中からコード追えなかくなった。がんばってコードを追えば動かせる最小コードが判明するはずだが、1万行からそれを見つけ出すのかと思うと心が折れた。
所感
jsonld-visをサクっと使うことは難しそう。親玉のd3.jsから調べてみるか。
