arbor.jsのエッジにラベルを追加する（クエリプラグイン）

Question

arbor.jsのエッジにラベルを追加する方法 グラフの可視化ライブラリです。

AとBはノードであり、Eは 一つの粗製の方法は、「テキストノード」T を挿入し、ATに参加することになるエッジであるとTB

しかし、私はこれにしたくない、いかなるがあると他の方法？

ここでAはB、CおよびD どのエッジにラベルを供給するために接続され、サンプルコードこれで

var theUI = { 
    nodes:{A:{color:"red", shape:"dot", alpha:1}, 
     B:{color:"#b2b19d", shape:"dot", alpha:1}, 
     C:{color:"#b2b19d", shape:"dot", alpha:1}, 
     D:{color:"#b2b19d", shape:"dot", alpha:1}, 
    }, 
    edges:{ 
     A:{ 
      B:{length:.8}, 
      C:{length:.8}, 
      D:{length:.8} 
      } 
    } 
} 

var sys = arbor.ParticleSystem() 
sys.parameters({stiffness:900, repulsion:2000, gravity:true, dt:0.015}) 
sys.renderer = Renderer("#sitemap") 
sys.graft(theUI) 

ですか？

Answer 1

arbor.jsを使用すると、グラフ全体を描画するコードを記述することができます。別のマップに保存することができる辺のタイトルを描画するなど、レンダリングの方法で何でもできます。

redraw:function() 
{ 
    ctx.fillStyle = "white"; 
    ctx.fillRect (0,0, canvas.width, canvas.height); 

    particleSystem.eachEdge (function (edge, pt1, pt2) 
    { 
     ctx.strokeStyle = "rgba(0,0,0, .333)"; 
     ctx.lineWidth = 1; 
     ctx.beginPath(); 
     ctx.moveTo (pt1.x, pt1.y); 
     ctx.lineTo (pt2.x, pt2.y); 
     ctx.stroke(); 

     ctx.fillStyle = "black"; 
     ctx.font = 'italic 13px sans-serif'; 
     ctx.fillText (edge.data.name, (pt1.x + pt2.x)/2, (pt1.y + pt2.y)/2); 

    }); 

    particleSystem.eachNode (function (node, pt) 
    { 
     var w = 10; 
     ctx.fillStyle = "orange"; 
     ctx.fillRect (pt.x-w/2, pt.y-w/2, w,w); 
     ctx.fillStyle = "black"; 
     ctx.font = 'italic 13px sans-serif'; 
     ctx.fillText (node.name, pt.x+8, pt.y+8); 
    });  
    }; 

各エッジのこのコード予想されるデータプロパティを初期化しながら充填する：

だけオーバーライドメソッドは、レンダラーにこの方法をレンダリングします。

私は手動で私のカスタムマップおよび方法にaddNode/addEdgeを使用して、すべてのノードとエッジを作成し、府私はあなたがカスタムデータをこのようにエッジを初期化するために少しのコードを変更することができたとします

var theUI = { 
    nodes:{A:{color:"red", shape:"dot", alpha:1}, 
     B:{color:"#b2b19d", shape:"dot", alpha:1}, 
     C:{color:"#b2b19d", shape:"dot", alpha:1}, 
     D:{color:"#b2b19d", shape:"dot", alpha:1}, 
    }, 
    edges:{ 
     A:{ 
      B:{length:.8, data:{name:"A->B"}}, 
      C:{length:.8, data:{name:"A->C"}}, 
      D:{length:.8, data:{name:"A->D"}} 
      } 
    } 
}

PS：取りますthis exampleを見て、私はそれから多くを学んだ。

Answer 2

edge.dataはので、私のために働いて、次のコード

ctx.fillText (edge.data.data.name, (pt1.x + pt2.x)/2, (pt1.y + pt2.y)/2);

と方法particleSystem.eachEdge()の最後の行を置き換える{length:.8, data:{name:"A->B"}}です。