Menu
I have an asp.net mvc4 application, in which i'd like to add a treeview . So i used this Jquery library : 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>
the result is :
i need to modify the font-size of the titles of the edges to 18px , i can't find the snippet to modify the tag's value.
How can i , so, modify the code ? Where can i find the target code?
756
You need to use a custom node render function as described in the documentation.
Here's the important code from my local test page:
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 });
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
