読者です 読者をやめる 読者になる 読者になる

やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

jsonld-visでグラフを描画したかったが失敗した

JSON-LDデータを可視化できるかと思ったが、できなかった。

jsonld-vis

jsonld-visJSON-LDをグラフ描画するライブラリ。

ライブラリ

ライブラリ ライセンス Copyright CDN
jsonld-vis BSD-3-Clause, Apach2.0 Copyright 2015 Standard Analytics IO Inc. ない
d3.js BSD-3-Clause Copyright 2015 Mike Bostock. https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js

どうやらjsonld-visd3.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から調べてみるか。