Path found.
![](\"images/pathline.png\")
";
}
}
// パス表示領域の内容を書き換え
$('.SBSelectedPath').html(resultText);
// サーブレットに送り返すパスオブジェクトを保存
pathobj = d.path;
// パス表示領域の表示設定をvisivleに
$('.SBPath').css('overflow-y', 'visible');
// パス内容の高さがパス表示領域を超えていたら
if($('.SBPath').height() < $('.SBSelectedPath').innerHeight()){
// パス表示領域の表示設定をスクロールに
$('.SBPath').css('overflow-y', 'scroll');
}
}
// オンマウスされたノードの高さに親を合わせるために合わせる高さを保存
var movey = d.y;
// 各ノードに対し
node
// 輪郭線の色を設定
.style("stroke", function(d){
// まずは背景色（デフォルト）を指定
var strokecolor = "#fafafa";
// パスのノード数だけ繰り返しながら
for(var n = 0; n < path.length; n++){
// パス内に含まれるノードだったら
if(path[n] == d.nodeid){
// 輪郭線を赤に
strokecolor = "#ffaaaa";
}
}
// ここまでで得られた輪郭線の色を返す
return strokecolor;
})
// 高さの値
.attr("cy", function(d){
// 現在の高さを取得
var currenty = d.y
// パスのノード数だけ繰り返しながら
for(var n = 0; n < path.length; n++){
// パス内に含まれるノードだったら
if(path[n] == d.nodeid){
// 内部で持つ高さをオンマウスされたノードと同じに（再描画時に反映）
d.y = movey;
}
}
// 今は現時点の高さを返す
return currenty;
});
// 各リンクテキストに対し
tlink
// テキスト表示判定
.text(function(d) {
// デフォルトで空をセット
var linktext = "";
// パスのノード数だけ繰り返しながら
for(var t = 0; t < path.length; t++){
// 自身がそのノードへ接続しているリンクならば
if(path[t] == d.target){
// リンクテキストにプロパティの値をセット
linktext = d.property
}
}
// ここまででできたリンクテキストを返す
return linktext;
});
// 各リンクに対し
link
// 線の色判定
.style("stroke", function(d){
var strokecolor = "#999";
// パスのノード数だけ繰り返しながら
for(var t = 0; t < path.length; t++){
// 自身がそのノードへ接続しているリンクならば
if(path[t] == d.target){
// リンクの色に赤をセット
strokecolor = "#ffaaaa"
}
}
// 線の色を返す
return strokecolor;
});
// ここまでの設定を元に再描画
redraw();
// クリックされたとき
}).on("click", function(d){
// 末端ノードならスパークル発行
if(d.path != "notend"){
generateSPARQL();
}
});
// 再描画関数
var redraw = function (duration){
// かける時間が未指定ならば
if(duration == undefined){
// 0.5秒かけてアニメーション
duration = 500;
}
// 各リンクについて設定された位置に再描画
link
.transition()
.duration(duration)
.attr("x1", function(d) {return node.data()[d.source].x;})
.attr("y1", function(d) {return node.data()[d.source].y;})
.attr("x2", function(d) {return node.data()[d.target].x;})
.attr("y2", function(d) {return node.data()[d.target].y;});
// 各ノードについて設定された位置に再描画
node
.transition()
.duration(duration)
.attr("cx", function(d) {return d.x;})
.attr("cy", function(d) {return d.y;});
// 各ノードテキストについて設定された位置に再描画、テキスト描画位置を上下に振る
tnode
.transition()
.duration(duration)
.attr("x", function(d) {return d.x;})
.attr("y", function(d) {
// デフォルトで少し下げる
var updown = (NODEHEIGHT * 0.4);
// 奇数番目の深さなら少し上げる
if(d.group % 2 == 1){
updown = -(NODEHEIGHT * 0.2);
}
// その値を高さに返すことでテキスト描画位置が互い違いになる
return d.y + updown;
});
// 各リンクテキストについて設定された位置に再描画
tlink
.transition()
.duration(duration)
.attr("x", function(d) {return (node.data()[d.source].x + node.data()[d.target].x) / 2;})
.attr("y", function(d) {return ((node.data()[d.source].y + node.data()[d.target].y) / 2) + 4;});
};
// 初回のみdurationを0と指定し再描画（アニメーションなし）
redraw(0);
}else{
// SVGの削除
d3.select(".SBGraph svg").remove();
}
};
// データ作成メソッド
make_data = function(){
// 結果用オブジェクトを初期化
ret = new Object();
ret['nodes'] = new Array();
ret['links'] = new Array();
// 各種変数の初期化
PATHNUM = 0;
MAXDEPTH = 0;
TREESPACE = 0;
DRAWHEIGHT = NODEHEIGHT;
// 表示するパス数
var viewnum;
// jsontextを取得
var obj = jsontext;
// 結果パス数のスタイルをリセット
$('.SBResult').css('color', 'black').css('font-weight', 'normal').css('margin-top', '4px');
// 複数形のsをつける
$('.SBPlural').text('s');
// パスの数が0だったら
if(obj.length == 0){
// 結果パス数のスタイルを赤の太字にし領域内上下中央に
$('.SBResult').css('color', 'red').css('font-weight', 'bold').css('margin-top', '20px');
// 複数形のsを削除
$('.SBPlural').text('');
// パス数が1なら
}else if(obj.length == 1){
// 複数形のsを削除
$('.SBPlural').text('');
}
// パスの数が十以下なら
if(obj.length <= 10){
// 表示数をパス数に
viewnum = obj.length;
// 結果パス数のスタイルを領域内上下中央に
$('.SBResult').css('margin-top', '20px');
// 全表示ボタンを隠す
$('.SBViewAll').hide();
// リミットが10ならば
}else if(pathlimit == 10){
// 表示パス数を10に
viewnum = 10;
// 全表示ボタンを出す
$('.SBViewAll').show();
// リミットがなければ
}else{
// 表示パス数を全パス数に
viewnum = obj.length;
// 結果パス数のスタイルを領域内上下中央に
$('.SBResult').css('margin-top', '20px');
// 全表示ボタンを隠す
$('.SBViewAll').hide();
}
// 結果パス数の値を更新
$('.SBPathnum').text(obj.length);
// 結果パス数を表示
$('.SBResult').show();
// objトップ階層の数だけ繰り返しながら
for(var i = 0; i < viewnum; i++){
if(i == 0){
// 初回だけルートノードをプッシュ
ret['nodes'].push({'name': obj[0]['label'], 'uri': obj[0]['startClass'], 'group': 0, 'x':50, 'y':50, 'nodeid':ret['nodes'].length, 'path': 'notend', 'nodecolor': 'hsl(40, 50%, 75%)'});
}
// 先にsourceに0（ルート）を代入
var source = 0;
// 共通ルート判定をtrueに
var isCommon = true;
// このパスのスコアを取得
var score = obj[i]['score'];
// classLinksの数だけ繰り返しながら
for(var j = 0;j < obj[i]['classLinks'].length; j++){
// リンクの名前をURL末尾から取得
var propertytext = obj[i]['classLinks'][j]['predicate'];
var propertysplit1 = propertytext.split("/");
var propertysplit2 = propertysplit1[propertysplit1.length - 1];
var propertysplit3 = propertysplit2.split("#");
propertytext = propertysplit3[propertysplit3.length - 1];
// 深さが最大より大きければ更新
if(MAXDEPTH < j+1){
MAXDEPTH = j+1;
}
// ここまで共通ルートなら
if(isCommon){
// 今回も共通か確認するためのフラグ
var isCommonNow = false;
// nodes配列に同じlinkedClassが既にあるか確認
var targets = [];
for(var k = 0; k < ret['nodes'].length; k++){
// 同階層かつ同じ名前のものがあったらtargets配列に番号を追加
if(ret['nodes'][k]['group'] == (j+1) && obj[i]['classLinks'][j]['linkedClass'] == ret['nodes'][k]['uri']){
targets.push(k);
}
}
// 既にあった場合はlinks配列に同じlinkが存在するか確認
if(targets.length != 0){
// 先ほど見つけたtargetsの数だけ繰り返しながら
for(var l = 0; l 