Question

我正在使用dracula来查看某些图表。这是一个使用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>

如下图所示，节点中较长的文本流出边界框。如何创建节点以使其尺寸足够大以适应其边界内的内容？

Sample Dracula Graph

Answer 1

你在这里走在正确的轨道上。您可以在渲染功能中执行此操作。首先添加文本元素，找出它的宽度，在创建框时使用该宽度，然后将文本元素移动到框元素之后。 Here's why第四步是必要的。

您可以将代码修改为以下内容：

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的后面，而是首先创建文本的“测试”版本以获得宽度，然后我将其删除。简单地移动元素可能会更快（也许更优雅），但这可行

Answer 2

我能够以这种方式实现它。我为这种情况添加了自己的渲染函数，它根据节点的文本/标签来处理节点的大小。

 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;
  };

这取决于您的字体大小，但公式将保持不变。

使用dracula时如何调整图形节点的大小以适应文本？

2 个答案: