plugin/huzplugin.js
// Updates the tree: drawing links, nodes, and tooltip
Updates the tree: drawing links, nodes, and tooltip
Updates the tree : drawing links nodes and tooltip
function update(source){
    var treeData = treemap(root);
    var nodes = treeData.descendants(),
        links = treeData.descendants().slice(1);
    nodes.forEach(function(d) {
        if (d.depth > treeHeight)
        treeHeight = d.depth;
        d.y = d.depth * 130;
        if (d.data.name === "goal state") {
            while (d !== root) {
                d.path = true;
                d = d.parent;
            }
        }
    });
    var Tooltip = d3.select(".tooltip");
    var mouseover = function(d) {
        Tooltip
            .style("opacity", 1)
        d3.select(this)
            .style("stroke", "black")
            .style("opacity", 1);
        hoveredOverStateInStatespace(d);
    }
    var mousemove = function(d) {
        Tooltip
            .html(formatTooltip(d))
            .style("left", (d3.event.pageX - 400) + "px")
            .style("top", (d3.event.pageY - 50) + "px");
    }
    var mouseleave = function(d) {
        Tooltip
            .style("opacity", 0)
        d3.select(this)
            .style("stroke", "none");
    }
    var getColor = function (d) {
        if (d.data.heuristic_value == 0)
            return '#FFD700'; 
        else if (d.data.heuristic_value == Number.POSITIVE_INFINITY)
            return '#000000'; 
        else
            return d3.interpolateHsl('red', 'blue')(d.data.heuristic_value / heurMax);
    }
    var node = svg.selectAll('g.node')
        .data(nodes, function(d) {return d.data.name;})
    var nodeEnter = node.enter().append('g')
        .attr('class', 'node')
        .attr("transform", function(d) {
            return "translate(" + source.y0 + "," + source.x0 + ")";
        })
        .on('click', click)
        .on('dblclick',dblclick)
        .on("mouseover", mouseover)
        .on("mousemove", mousemove)
        .on("mouseleave", mouseleave);
    nodeEnter.append('circle')
        .attr('class', 'node')
        .attr('r', 1e-6)
        .style("fill", "lightsteelblue");
    var nodeUpdate = nodeEnter.merge(node);
    nodeUpdate.transition()
        .duration(duration)
        .attr("transform", function(d) {
            return "translate(" + d.y + "," + d.x + ")";
        });
    nodeUpdate.select('circle.node')
        .attr('r', 10)
        .style("fill", getColor)
        .attr('cursor', 'pointer');
    var nodeExit = node.exit().transition()
        .duration(duration)
        .attr("transform", function(d) {
            return "translate(" + source.y + "," + source.x + ")";
        })
        .remove();
    nodeExit.select('circle')
        .attr('r', 1e-6);
    nodeExit.select('text')
        .style('fill-opacity', 1e-6);
    var link = svg.selectAll('path.link')
        .data(links, function(d) { return d.data.name; });
    var linkEnter = link.enter().insert('path', "g")
        .attr("class", "link")
        .attr('d', function(d){
            var o = {x: source.x0, y: source.y0}
            return diagonal(o, o)})
        .on('mousemove', function(d) {
            Tooltip
                .html(formatTooltip(d, false))
                .style("left", (d3.event.pageX - 400) + "px")
                .style("top", (d3.event.pageY - 50) + "px");
        })
        .on('mouseleave', function(d) {
            Tooltip
                .style("opacity", 0)
            d3.select(this)
                .style("stroke", "#ccc");
        })
        .on('mouseover', function(d) {
            Tooltip
                .style("opacity", 1)
            d3.select(this)
                .style("stroke", "black")
                .style("opacity", 1);
        })
        .style("fill", "none")
        .style("stroke", "#ccc")
        .style("stroke-width", "2px");
    var linkUpdate = linkEnter.merge(link);
    linkUpdate.transition()
        .duration(duration)
        .attr('d', function(d){ return diagonal(d, d.parent) });
    var linkExit = link.exit().transition()
        .duration(duration)
        .attr('d', function(d) {
            var o = {x: source.x, y: source.y}
            return diagonal(o, o)
        })
        .remove();
    nodes.forEach(function(d){
        d.x0 = d.x;
        d.y0 = d.y;
    });
}
function update ( source ) { var treeData = treemap ( root ) ; var nodes = treeData . descendants ( ) , links = treeData . descendants ( ) . slice ( 1 ) ; nodes . forEach ( function ( d ) { if ( d . depth > treeHeight ) treeHeight = d . depth ; d . y = d . depth * 130 ; if ( d . data . name === "goal state" ) { while ( d !== root ) { d . path = true ; d = d . parent ; } } } ) ; var Tooltip = d3 . select ( ".tooltip" ) ; var mouseover = function ( d ) { Tooltip . style ( "opacity" , 1 ) d3 . select ( this ) . style ( "stroke" , "black" ) . style ( "opacity" , 1 ) ; hoveredOverStateInStatespace ( d ) ; } var mousemove = function ( d ) { Tooltip . html ( formatTooltip ( d ) ) . style ( "left" , ( d3 . event . pageX - 400 ) + "px" ) . style ( "top" , ( d3 . event . pageY - 50 ) + "px" ) ; } var mouseleave = function ( d ) { Tooltip . style ( "opacity" , 0 ) d3 . select ( this ) . style ( "stroke" , "none" ) ; } var getColor = function ( d ) { if ( d . data . heuristic_value == 0 ) return '#FFD700' ; else if ( d . data . heuristic_value == Number . POSITIVE_INFINITY ) return '#000000' ; else return d3 . interpolateHsl ( 'red' , 'blue' ) ( d . data . heuristic_value / heurMax ) ; } var node = svg . selectAll ( 'g.node' ) . data ( nodes , function ( d ) { return d . data . name ; } ) var nodeEnter = node . enter ( ) . append ( 'g' ) . attr ( 'class' , 'node' ) . attr ( "transform" , function ( d ) { return "translate(" + source . y0 + "," + source . x0 + ")" ; } ) . on ( 'click' , click ) . on ( 'dblclick' , dblclick ) . on ( "mouseover" , mouseover ) . on ( "mousemove" , mousemove ) . on ( "mouseleave" , mouseleave ) ; nodeEnter . append ( 'circle' ) . attr ( 'class' , 'node' ) . attr ( 'r' , 1e-6 ) . style ( "fill" , "lightsteelblue" ) ; var nodeUpdate = nodeEnter . merge ( node ) ; nodeUpdate . transition ( ) . duration ( duration ) . attr ( "transform" , function ( d ) { return "translate(" + d . y + "," + d . x + ")" ; } ) ; nodeUpdate . select ( 'circle.node' ) . attr ( 'r' , 10 ) . style ( "fill" , getColor ) . attr ( 'cursor' , 'pointer' ) ; var nodeExit = node . exit ( ) . transition ( ) . duration ( duration ) . attr ( "transform" , function ( d ) { return "translate(" + source . y + "," + source . x + ")" ; } ) . remove ( ) ; nodeExit . select ( 'circle' ) . attr ( 'r' , 1e-6 ) ; nodeExit . select ( 'text' ) . style ( 'fill-opacity' , 1e-6 ) ; var link = svg . selectAll ( 'path.link' ) . data ( links , function ( d ) { return d . data . name ; } ) ; var linkEnter = link . enter ( ) . insert ( 'path' , "g" ) . attr ( "class" , "link" ) . attr ( 'd' , function ( d ) { var o = { x : source . x0 , y : source . y0 } return diagonal ( o , o ) } ) . on ( 'mousemove' , function ( d ) { Tooltip . html ( formatTooltip ( d , false ) ) . style ( "left" , ( d3 . event . pageX - 400 ) + "px" ) . style ( "top" , ( d3 . event . pageY - 50 ) + "px" ) ; } ) . on ( 'mouseleave' , function ( d ) { Tooltip . style ( "opacity" , 0 ) d3 . select ( this ) . style ( "stroke" , "#ccc" ) ; } ) . on ( 'mouseover' , function ( d ) { Tooltip . style ( "opacity" , 1 ) d3 . select ( this ) . style ( "stroke" , "black" ) . style ( "opacity" , 1 ) ; } ) . style ( "fill" , "none" ) . style ( "stroke" , "#ccc" ) . style ( "stroke-width" , "2px" ) ; var linkUpdate = linkEnter . merge ( link ) ; linkUpdate . transition ( ) . duration ( duration ) . attr ( 'd' , function ( d ) { return diagonal ( d , d . parent ) } ) ; var linkExit = link . exit ( ) . transition ( ) . duration ( duration ) . attr ( 'd' , function ( d ) { var o = { x : source . x , y : source . y } return diagonal ( o , o ) } ) . remove ( ) ; nodes . forEach ( function ( d ) { d . x0 = d . x ; d . y0 = d . y ; } ) ; }
Updates the tree: drawing links, nodes, and tooltip
Updates the tree : drawing links nodes and tooltip
//Assigns the x and y position for the nodes // Compute the new tree layout. // Normalize for fixed-depth. // ****************** Nodes section *************************** // Three function that change the tooltip when user hover / move / leave a cell // gold // black // Update the nodes... // Enter any new modes at the parent's previous position. // Add Circle for the nodes // Add labels for the nodes /*
    nodeEnter.append('text')
        .attr("dy", ".35em")
        .attr("x", function(d) {
            return d.children || d._children ? -13 : 13;
        })
        .attr("text-anchor", function(d) {
            return d.children || d._children ? "end" : "start";
        })
        .text(function(d) { return d.data.name; });
    */ // UPDATE // Transition to the proper position for the node // Update the node attributes and style // Remove any exiting nodes // On exit reduce the node circles size to 0 // On exit reduce the opacity of text labels // ****************** links section *************************** // Update the links... // Enter any new links at the parent's previous position. // UPDATE // Transition back to the parent element position // Remove any exiting links // Store the old positions for transition.