2

私はarbor.jsを使用しており、いくつかの問題についてサポートが必要です。基本的なグラフであるデータベースをベースにしたグラフを作成することができました。さて、私がする必要があるのは、ノードをクリックしてノードデータを取得し、それを側面に表示することです。また、有向エッジがあります。だから、問題は

  1. マウスダウン機能が機能していません。完全に機能しないか、機能する場合は、ノードをクリックすると自動的にドラッグされます。つまり、マウスにアタッチされて解放できません。私がやろうとしているのは、ノードをクリックすると、側面にノードの詳細を表示する必要があるということです。ノードの詳細は、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をクエリして取得することはできませんでした。グラフも先のとがったものに固執しました。

これはそれを試す方法ですか?それ以外の方法でそれを行うにはどうすればよいですか。大きな質問と意図しない間違ったフォーマットで申し訳ありませんが、これが私の最初の投稿です。

ありがとう。

4

1 に答える 1

1

私のハンドラーの次のコードは私のために働きます。YMMV。

clicked関数を持つ代わりに、私はadownとにマップするadroppedを持っていますdragged。また、ノードが実際にクリックされたのか、ドラッグされただけなのかを示すために関数で使用される変数
も含めました。movedropped

うまくいけば、これが役立ちます!

initMouseHandling:function(){
// no-nonsense drag and drop (thanks springy.js)
selected = null;
nearest = null;
var dragged = null;
var move = false;

// set up a handler object that will initially listen for mousedowns then
// for moves and mouseups while dragging
var handler = {
  moved:function(e){
    var pos = $(canvas).offset();
    _mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top);
    nearest = particleSystem.nearest(_mouseP);

    if(!nearest.node){
        return false;
    }

    selected = (nearest.distance < nearest.node.data.radius) ? nearest : null

    // code for node that mouse is hovered on ('selected')

  },
  down:function(e){
    var pos = $(canvas).offset();
    _mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
    nearest = dragged = particleSystem.nearest(_mouseP);
    move = false;

    if (dragged && dragged.node !== null){
        dragged.node.fixed = true
    }

    $(canvas).bind('mousemove', handler.dragged)
    $(window).bind('mouseup', handler.dropped)

    return false
  },
  dragged:function(e){
    var old_nearest = nearest && nearest.node._id
    var pos = $(canvas).offset();
    var s = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
    move = true;

    if (!nearest) return
    if (dragged !== null && dragged.node !== null){
      var p = particleSystem.fromScreen(s)
      dragged.node.p = p
    }

    return false
  },

  dropped:function(e){
    var edit = $("#edit").prop('checked')
    if (dragged===null || dragged.node===undefined) return
    if (dragged.node !== null) {
        if(move===false) {

            // code for clicked node (dragged.node)

        }
        dragged.node.fixed = false
    }
    dragged.node.tempMass = 1000
    dragged = null
    selected = null
    $(canvas).unbind('mousemove', handler.dragged)
    $(window).unbind('mouseup', handler.dropped)
    _mouseP = null
    return false
  }
}

$(canvas).mousedown(handler.down);
$(canvas).mousemove(handler.moved);
}
于 2013-01-13T19:16:03.833 に答える