2013-10-03 101 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 });