web-dev-qa-db-ja.com

シンプルだが便利なjquery.JsPlumbの例はありますか？

先週、私はいくつかのグラフ視覚化javascript-libraryを探していて、 jsPlumb に出くわしました。これは、私が見た例、最も見栄えがよく、最も高度なライブラリによって判断されます。私はこれまで見てきました。ドキュメントは非常に大きいですが、最も重要なタスクを実際に実行する方法がわからないため、あまり役に立ちません。

私の質問リストは次のとおりです。

  • DOMツリーの事前定義された要素を使用するようにグラフに指示するにはどうすればよいですか？
  • これらの要素のどの部分が表示されますか？
  • 接続は簡単ですが、配置を定義するにはどうすればよいですか？

これらの質問は残っていますが、いくつかの例がありますが、それらは単純に使用できるか（例1を参照）、または非常に複雑なので取得することさえできます（ダウンロードは問題ありませんが、私はしません）ライブラリを試してみる前に、本当にすべてを分析したいのですが...）コードは少なくとも私には不可能です（ https://github.com/sporritt/jsPlumb/tree/master/demo を参照） ）。

例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>

その結果 Screenshot of Example 1

誰かが私の質問に答える例を教えてもらえますか？

前もって感謝します。

javascriptjqueryjquery-uijsplumb
20
Sebastian van Wickern

終了ヘッドタグの直前にこれを追加してみてください...

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

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

それらを絶対的に配置し、それぞれに上/左、そしておそらく境界線を付けることをお勧めします。そうすれば、もう少し便利なものが表示されます。

3
StackOverflowResponder