私はarbor.jsを使用しており、いくつかの問題についてサポートが必要です。基本的なグラフであるデータベースをベースにしたグラフを作成することができました。さて、私がする必要があるのは、ノードをクリックしてノードデータを取得し、それを側面に表示することです。また、有向エッジがあります。だから、問題は
マウスダウン機能が機能していません。完全に機能しないか、機能する場合は、ノードをクリックすると自動的にドラッグされます。つまり、マウスにアタッチされて解放できません。私がやろうとしているのは、ノードをクリックすると、側面にノードの詳細を表示する必要があるということです。ノードの詳細は、jsonとして取得できる別のページにあります。私のマウス処理コードは次のとおりです
initMouseHandling:function(){ // no-nonsense drag and drop (thanks springy.js) var dragged = null; // set up a handler object that will initially listen for mousedowns then // for moves and mouseups while dragging var handler = { clicked:function(e){ var pos = $(canvas).offset(); _mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top) dragged = particleSystem.nearest(_mouseP); var d = document.getElementById("infoDiv"); if (dragged && dragged.node !== null){ // while we're dragging, don't let physics move the node dragged.node.fixed = true } ///document.getElementById('detailBox').innerHTML=selected.node.name; $(canvas).bind('mousemove', handler.dragged) $(window).bind('mouseup', handler.dropped) $(canvas).bind('mousedown', handler.clicked) return false }, dragged:function(e){ var pos = $(canvas).offset(); var s = arbor.Point(e.pageX-pos.left, e.pageY-pos.top) if (dragged && dragged.node !== null){ var p = particleSystem.fromScreen(s) dragged.node.p = p } return false }, dropped:function(e){ if (dragged===null || dragged.node===undefined) return if (dragged.node !== null) dragged.node.fixed = false dragged.node.tempMass = 1000 dragged = null $(canvas).unbind('mousemove', handler.dragged) $(window).unbind('mouseup', handler.dropped) _mouseP = null return false } clicked:function(e){ var pos = $(this).offset(); var p = {x:e.pageX-pos.left, y:e.pageY-pos.top} selected = nearest = dragged = particleSystem.nearest(p); var nodeAddress = "http://localhost:7474/db/data/node/" + selected.node.name; if (selected.node !== null){ // dragged.node.tempMass = 10000 dragged.node.fixed = false; //$(canvas).unbind('mousemove', handler.dragged) } //document.getElementById('detailBox').innerHTML=selected.node.name; getData(nodeAddress); //alert(nodeData.self); return false; } } //My click function //$(canvas).mousedown(function(e){ //});
}、
}
上記のコードはまったく機能しません。私もjQueryを初めて使用するため、最後にクリックした関数が実行しようとしているエラーを理解できません。ノードをクリックすると、ノードの詳細を取得します。別のページを表示します。ここでの機能は完全に失敗です。このように試す前に、
//My click function
$(canvas).mousedown(function(e){
var pos = $(this).offset();
var p = {x:e.pageX-pos.left, y:e.pageY-pos.top}
selected = nearest = dragged = particleSystem.nearest(p);
var nodeAddress = "http://localhost:7474/db/data/node/" + selected.node.name;
if (selected.node !== null){
// dragged.node.tempMass = 10000
dragged.node.fixed = false;
//$(canvas).unbind('mousemove', handler.dragged)
}
//document.getElementById('detailBox').innerHTML=selected.node.name;
getData(nodeAddress);
//alert(nodeData.self);
return false;
});
// start listening
$(canvas).mousedown(handler.clicked);
これはハンドラー変数の外にあり、これによりjavascriptは正常に機能し、側面にノード番号が表示されました。しかし、jsonをクエリして取得することはできませんでした。グラフも先のとがったものに固執しました。
これはそれを試す方法ですか?それ以外の方法でそれを行うにはどうすればよいですか。大きな質問と意図しない間違ったフォーマットで申し訳ありませんが、これが私の最初の投稿です。
ありがとう。