20

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

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

  • DOM-Tree の定義済み要素を使用するようにグラフに指示するにはどうすればよいですか?
  • これらの要素のどの部分が表示されますか?
  • 接続を作成するのは簡単ですが、アライメントを定義するにはどうすればよいですか?

これらの質問は残っていますが、いくつかの例がありますが、単純すぎて役に立たないか (例 1 を参照)、非常に複雑で取得することさえできます (ダウンロードは問題ではありませんが、ライブラリをいじる前に本当にすべてを分析したい...）コードは少なくとも私には不可能です（https://github.com/sporitt/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>

その結果、 例 1 のスクリーンショット

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

前もって感謝します。

4

2 に答える 2

15

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

<style type="text/css">
    #container0, #container1 {
        float: left;
        height: 100px;
        width: 100px;
        border: 1px solid black;
        margin: 10px;
    }
</style>
于 2012-12-12T00:27:54.670 に答える
3

そこにあるものに問題はありませんが、div にはスタイルがなく、配置されていません。

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

于 2012-10-23T05:39:54.037 に答える