更改库graphdracula中的字体大小

时间:2013-10-03 14:31:35

标签: jquery asp.net .net css asp.net-mvc-4

我有一个asp.net mvc4应用程序,我想在其中添加一个树视图。所以我使用了这个Jquery库:graphdracula

<html>
  <head>
    <script type="text/javascript" src="~/Content/Scripts/raphael-min.js"></script>
    <script type="text/javascript" src="~/Content/Scripts/dracula_graffle.js"></script>
    <script type="text/javascript" src="~/Content/Scripts/dracula_graph.js"></script>
    <script type="text/javascript" src="~/Content/Scripts/dracula_algorithms.js"></script>
      <script type="text/javascript">
         $(document).ready(function () {
            var width = $(document).width() -500;
            var height = $(document).height();
            var g = new Graph();
            g.edgeFactory.template.style.directed = true;

           @for(int i =0;i < @Model[1].Count; i+=2){
              @: g.addEdge("@Html.Raw(@Model[1][i])","@Html.Raw(@Model[1][i+1])");

           }
            var layouter = new Graph.Layout.Ordered(g, topological_sort(g));
            var renderer = new Graph.Renderer.Raphael('canvas', g, width, height);

            });
       </script>
  </head>
  <body>

    <div id="canvas"></div>
     </body>
</html>

结果是:

img

我需要将边缘标题的字体大小修改为18px,我找不到修改标签值的片段。

我怎么能修改代码呢?我在哪里可以找到目标代码?

1 个答案:

答案 0 :(得分:3)

您需要使用the documentation中描述的自定义节点渲染功能。

以下是我本地测试页面中的重要代码:

var g = new Graph();

var render = function(r, n) {
    var color = Raphael.getColor();
    var set = r.set().
        push(r.ellipse(n.point[0], n.point[1], 30, 20).attr({fill: color, stroke: color, "stroke-width": 2})).
        push(r.text(n.point[0], n.point[1] + 30, n.label || n.id).attr({"font-size": "18px"}));
    return set;
};

/* add a simple node */
g.addNode("strawberry", { render : render });
g.addNode("cherry", { render : render });