2013-10-03 65 views
3

我有一个asp.net mvc4应用程序,我想在其中添加一个treeview。所以我用这个jQuery库:graphdracula更改库中的字体大小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

我需要修改边缘的标题的字体大小18像素,我无法找到修改标签值的代码片段。

我该如何修改代码?我在哪里可以找到目标代码?

回答

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