plugin/huzplugin.js
// Generates the SVG object, and loads the tree data into a d3 style tree
Generates the SVG object, and loads the tree data into a d3 style tree
Generates the SVG object and loads the tree data into a d3 style tree
function makeTree() {
    if (goTree){
        var margin = {top: 20, right: 30, bottom: 30, left: 90};
        var width = $('#statespace').width() - margin.left - margin.right;
        var height = 700 - margin.top - margin.bottom;
        zoom = d3.zoom().on('zoom', function() {
                    svg.attr('transform', d3.event.transform);
                    })
        svg = d3.select("#statespace").append("svg")
            .attr("width", "100%")
            .attr("height", height + margin.top + margin.bottom)
            .style("background-color", "white")
            .call(zoom)
            .on("dblclick.zoom", null)
            .append("g")
            .attr("transform", "translate("+ margin.left + "," + margin.top + ")")
            .append("g")
            .attr("transform", "translate("+ (width / 2) + "," + margin.top + ")");
        d3.select("#statespace")
            .append("div")
            .style("opacity", 0)
            .attr("class", "tooltip")
            .style("background-color", "white")
            .style("border", "solid")
            .style("border-width", "2px")
            .style("border-radius", "5px")
            .style("padding", "5px")
        duration = 750;
        treemap = d3.tree().size([height, width]);
        root = d3.hierarchy(treeData, function(d) { return d.children; });
        root.x0 = height / 2;
        root.y0 = 0;
        loadData(root, function(result) {
            convertNode(result);
            update(result);
            goTree = false;
        });
  }
}
function makeTree ( ) { if ( goTree ) { var margin = { top : 20 , right : 30 , bottom : 30 , left : 90 } ; var width = $ ( '#statespace' ) . width ( ) - margin . left - margin . right ; var height = 700 - margin . top - margin . bottom ; zoom = d3 . zoom ( ) . on ( 'zoom' , function ( ) { svg . attr ( 'transform' , d3 . event . transform ) ; } ) svg = d3 . select ( "#statespace" ) . append ( "svg" ) . attr ( "width" , "100%" ) . attr ( "height" , height + margin . top + margin . bottom ) . style ( "background-color" , "white" ) . call ( zoom ) . on ( "dblclick.zoom" , null ) . append ( "g" ) . attr ( "transform" , "translate(" + margin . left + "," + margin . top + ")" ) . append ( "g" ) . attr ( "transform" , "translate(" + ( width / 2 ) + "," + margin . top + ")" ) ; d3 . select ( "#statespace" ) . append ( "div" ) . style ( "opacity" , 0 ) . attr ( "class" , "tooltip" ) . style ( "background-color" , "white" ) . style ( "border" , "solid" ) . style ( "border-width" , "2px" ) . style ( "border-radius" , "5px" ) . style ( "padding" , "5px" ) duration = 750 ; treemap = d3 . tree ( ) . size ( [ height , width ] ) ; root = d3 . hierarchy ( treeData , function ( d ) { return d . children ; } ) ; root . x0 = height / 2 ; root . y0 = 0 ; loadData ( root , function ( result ) { convertNode ( result ) ; update ( result ) ; goTree = false ; } ) ; } }
Generates the SVG object, and loads the tree data into a d3 style tree
Generates the SVG object and loads the tree data into a d3 style tree
// Prevents the creation of more than one tree // Set the dimensions and margins of the diagram // Initialize d3 zoom // Declaring the SVG object, init attributes // create the tooltip // Num and duration of animations // declares a tree layout and assigns the size // Assigns parent, children, height, depth // Loads children of root // Preventing multiple trees