2012-10-22 20 views
20

先週、私はいくつかのグラフビジュアライゼーションjavascript-libraryを探していました。私が見た例で見たように、jsPlumbを見つけました。遠いドキュメントは、非常に大きなものですが、私が実際に最も重要なタスクを実行する方法を理解できないため、あまり役に立ちません。シンプルだが便利なjquery.JsPlumbの例はありますか?

質問の私のリストには含まれています:

  • どのように私は、DOMツリーの事前に定義された要素を使用してグラフを言うのですか?
  • これらの要素のどの部分が表示されますか?
  • 接続を作成するのは簡単ですが、どのように整列を定義しますか?

これらの質問は残っていますが、いくつかの例がありますが、いずれの用途にも簡単に使用できます(例1を参照)。問題はありますが、ライブラリを使って遊ぶ前にすべてを分析したくはありません...)コードは少なくとも私にとっては不可能です(https://github.com/sporritt/jsPlumb/tree/master/demo参照)。 Screenshot of Example 1

になり

例1

<head> 
    <script type="text/javascript" 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"> 
    </script> 
    <script type="text/javascript" 
    src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"> 
    </script> 
    <script type="text/javascript" 
    src="PATH_TO/jquery.jsPlumb-1.3.15-all-min.js "> 
    </script> 
    <script type="text/javascript"> 
    jsPlumb.bind("ready", function() { 
     var e0 = jsPlumb.addEndpoint("container0"), 
     e1 = jsPlumb.addEndpoint("container1"); 

     jsPlumb.connect({ source:e0, target:e1 }); 
    }); 
</script> 
</head> 
<body> 
    <div id="container0"> 
    </div> 
    <div id="container1"> 
    </div> 
</body> 

誰も私に私の質問に答える例を与えることができますか?

ありがとうございます。

答えて

15

だけhead終了タグの前にこれを追加してみてください...

<style type="text/css"> 
    #container0, #container1 { 
     float: left; 
     height: 100px; 
     width: 100px; 
     border: 1px solid black; 
     margin: 10px; 
    } 
</style> 
3

そこには何も問題はありませんが、divにはスタイリングがなく、配置されていません。

私はそれらを絶対的な位置に配置し、それぞれ上端/左端、そして境界線を与えることをお勧めします。もう少し役に立つものがあります。

関連する問題