If no nodes are passed it unselects all nodes/edges Dependencies GraphvizSvg.highlight($nodesEdges, tooltips) Highlight the DOM elements in $nodesEdges, if tooltips is true also show tooltips. ndToBack($elements) Sends the DOM elements in the jQuery set to the back GraphvizSvg.bringToFront($elements) Brings the DOM elements in the jQuery set to the front GraphvizSvg.tooltip($elements, show) Show/hide tooltips on the SOM elements in the $elements set GraphvizSvg.linked(node, includeEdges) Returns a jQuery set of DOM elements linked with node (in an undirected graph) if includeEdges is true if also includes the edges GraphvizSvg.linkedFrom(node, includeEdges) Returns a jQuery set of DOM elements linked from node if includeEdges is true if also includes the edges GraphvizSvg.linkedTo(node, includeEdges) Returns a jQuery set of DOM elements linked to node if includeEdges is true if also includes the edges GraphvizSvg.edgesByName() Returns an object mapping graphviz edge names to its DOM element GraphvizSvg.nodesByName() Returns an object mapping graphviz node names to its DOM element GraphvizSvg.edges() Returns all edge DOM elements GraphvizSvg.nodes() Returns all node DOM elements To access these you need to get the 'graphviz.svg' object from the jQuery element you initialized ( $('#graph').data('graphviz.svg')) it is also supplied as this to the ready callback. There are also other methods you can call to navigate the graph, select elements, highlight, move etc. The demo (demo.html) and the source ( GraphvizSvg.DEFAULTS) show how these work in detail. Will be asyncronous if loading svg from a url ready: callback when setup is complete.highlight: object containing callbacks for selected, unselected Default dims color of unselected.tooltips: object containing callbacks for init, show, hide and update. ![]() shrink: the amount to shrink nodes by this gives a nice gap between nodes and edges.url: if present the url to fetch the svg from.Then init the node as a Graphviz object: $(document).ready(function()) ĭepending on the options passed this will load, adopt and setup the Graphviz generated SVG under #graph and call your supplied ready function when the setup is complete. set it as a positioning root set positioning: relative or somethign else.set its size (width/height/top/bottom etc).Fancy UI tooltips bootstrap supported out the boxĬreate a node where you want your SVG graph to be displayed.JQuery plugin to make Graphviz SVG output more interactive and easier to navigate.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |