0

いくつかのグラフを視覚化するためにドラキュラを使用しています。これは、dracula を使用したサンプル HTML ページです。

<html>

    <head>
        <title>
            Testing Dracula
        </title>
        <script type="text/javascript" src="scripts/vendor/dracula/raphael-min.js">

        </script>
        <script type="text/javascript" src="scripts/vendor/dracula/dracula_graph.js">

        </script>
        <script type="text/javascript" src="scripts/vendor/dracula/dracula_graffle.js">

        </script>
        <script type="text/javascript" src="scripts/vendor/jquery.min.js">

        </script>
    </head>

    <body>
        <div id='canvas'>
        </div>
        <script type="text/javascript">
          var render = function(r, n) {
          var set = r.set().push(
          r.rect(n.point[0] - 30, n.point[1] - 13, 62, 86).attr({
                             "fill": "#fa8",
                             "stroke-width": 2,
                              r: "9px"
          })).push(r.text(n.point[0], n.point[1] + 30, n.label).attr({
                                   "font-size": "14px"
              })); /* custom tooltip attached to the set */
          set.items.forEach(
               function(el) {
                  el.tooltip(r.set().push(r.rect(0, 0, 0, 0).attr({
                                     "fill": "#fec",
                                     "stroke-width": 1,
                                     r: "9px"
                   })))
               });
          return set;
          };

          $(document).ready(function() {
             var width = $(document).width() - 20;
             var height = $(document).height() - 60;
             var g = new Graph();
             var data = {
               "vertices": ["This is some sample long text.", "A", "B", "C", "D\n some More Sample\n Text", "E"],
               "edges": [
                          [
                           0, 1],
                          [
                           0, 2],
                          [
                           0, 3],
                          [
                           2, 4],
                          [
                           3, 4],
                          [
                           4, 5]
                         ]
            };


            addNodes(data.vertices, g);
            addEdges(data.edges, g);

            var layouter = new Graph.Layout.Spring(g);
            layouter.layout(); /* draw the graph using the RaphaelJS draw implementation */
            var renderer = new Graph.Renderer.Raphael('canvas', g, width, height);
                                       renderer.draw();

                               });

            function addNodes(vertices, g) {
                jQuery.each(vertices, function(index, text) {
                g.addNode(index, {
                     label: text,
                     render: render
                             });
                           });
                               }
                 function addEdges(edges, g) {
                 jQuery.each(edges, function(index, arr) {
                 g.addEdge(arr[0], arr[1], {
                      directed: true
                   })
                 });
                               }
        </script>
    </body>

</html>

下の画像でわかるように、ノード内の長いテキストはバウンディング ボックスの外側に流れています。境界内のコンテンツに収まる大きさになるようにノードを作成するにはどうすればよいですか?

サンプルドラキュラグラフ

4

2 に答える 2

0

この方法で達成できました。この場合、ノードのテキスト/ラベルに基づいてノードのサイズを処理する独自のレンダリング関数を追加しました。

 var render = function (r, n) {
      var frame = r.rect(n.point[0] - 3*n.label.length, n.point[1] - 3, 6*n.label.length, 25);
      frame.attr({
          fill: n.Color, r: n.Radius,
          'stroke-width': (n.distance+'px')
      });
      /* the Raphael set is obligatory, containing all you want to display */
      var set = r.set().push(frame,
          /* custom objects go here */
          r.text(n.point[0], n.point[1] + 10,n.label)
      );
      return set;
  };

これはフォント サイズによって異なりますが、式は変わりません。

于 2016-01-26T14:29:38.593 に答える
0

あなたはここで正しい軌道に乗っています。これは、レンダリング関数で行うことができます。最初にテキスト要素を追加し、その幅を把握し、ボックスを作成するときにその幅を使用してから、テキスト要素をボックス要素の後に移動します。 4 番目のステップが必要な理由は次のとおりです。

コードを次のように変更できます。

var render = function(r, n) {
    var set = r.set().push(
    var textbit = r.text(n.point[0], n.point[1] + 30, n.label).attr({ "font-size": "14px" });
    var width = $(textbit.node).width() + 10 ;
    textbit.remove();
        r.rect(n.point[0] - Math.round(width / 2), n.point[1] - 13, width, 86).attr({
                     "fill": "#fa8",
                     "stroke-width": 2,
                      r: "9px"
    })).push(r.text(n.point[0], n.point[1] + 30, n.label).attr({
                           "font-size": "14px"
      })); /* custom tooltip attached to the set */
    set.items.forEach(
       function(el) {
          el.tooltip(r.set().push(r.rect(0, 0, 0, 0).attr({
                             "fill": "#fec",
                             "stroke-width": 1,
                             r: "9px"
           })))
       });
    return set;
};

確かに、この例では実際にテキスト要素を DOM の後ろに移動するのではなく、最初に幅を取得するためだけにテキストの「テスト」バージョンを作成してから、それを削除します。単純に要素を移動すると、最終的にはより高速になる可能性があります (そして、おそらくもう少しエレガントになります) が、これは機能します

于 2013-01-04T21:35:25.890 に答える