関連性をビジュアライズするJavaScript「jConnecter」

WEB上で「AとBは関連性があるがCとはない」と表現することがあった場合、画像編集ソフトを使用するしかありませんでした。
jQueryプラグインのjConnecterを利用すると、簡単に表現することができます。
関連性をビジュアライズするJavaScript「jConnecter」サンプル

使用方法
jConnecterからjConnecter.jsを、Canvas Text FunctionsからCanvasText.jsを、そしてjQueryからjquery.jsをダウロードします。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="CanvasText.js"></script>
<script type="text/javascript" src="jConnecter.js"></script>
<script>
$(document).ready(function() {
$("#id名").connecter(
[{ id: "a", text: "A", connections: ["b", "e", "f"] }, //ここから関連付けています。
{ id: "b", text: "B", connections: ["a", "e"] }, //connectionsで、関連付けたいidを指定します。
{ id: "c", text: "C", connections: ["a", "b" , "f"] }, //日本語は通りません。
{ id: "d", text: "D", connections: ["b", "a"] },
{ id: "e", text: "E", connections: ["d", "b", "f"] },
{ id: "f", text: "F", connections: ["d", "a"] }]
);
});
</script>

最後に上記idを表示させたい場所に記述すれば完成です。
<div style="height: 400px; width: 400px;" id="id名">
関連性をビジュアライズするJavaScript「jConnecter」サンプル

sponsors

「関連性をビジュアライズするJavaScript「jConnecter」」をシェアする

記事作成:
記事URL:

TOP > > > 関連性をビジュアライズするJavaScript「jConnecter」