initi.doc/templates/initi/tmpl/inheritance3.tmpl

<?js
    var data = obj;
    var self = this;

    var str = JSON.stringify(inheritance);

?>



<style>

    .node {
        cursor: pointer;
        stroke: #3182bd;
        stroke-width: 1.5px;
    }

    .link {
        fill: none;
        stroke: #9ecae1;
        stroke-width: 1.5px;
    }

</style>

<div class="oa fs"  id="arch-scroll" style="max-width: 100%">
    <div id="arch-content" class=""></div>
</div>

<!-- load the d3.js library -->
<script src="http://d3js.org/d3.v3.min.js"></script>

<script>
    var as = document.getElementById("arch-scroll");
    as.style.height = (screen.availHeight - 243) + "px";


    var sstr = '<?js= str ?>';
    var hheight = '<?js= height ?>';

    var treeData = [JSON.parse(sstr)];



    // ------------
    var __updatelinks = function (links) {
        for (var a = 0; a < links.length; a++) {
            var link = links[a];

            var minsize = 2150;
            var max = Math.max(link.source.children.length, link.target.children.length);

            // link.strange = 2;

        }
    };


    // ************** Generate the tree diagram	 *****************
    var width = 2000,
        height = hheight,
        root;

    var force = d3.layout.force()
        .size([width, height])
        .on("tick", tick)
        .linkDistance(function(link){
            var max = Math.sqrt(Math.max(link.source.children.length, link.target.children.length) * 20);
            return max < 20 ? 20 : max;
        })
        .charge(function () {
            return -50;
        });

    var svg = d3.select("#arch-content").append("svg")
        .attr("width", width)
        .attr("height", height);

    var link = svg.selectAll(".link"),
        node = svg.selectAll(".node");

    root = treeData[0];
    update();

    function update() {
        var nodes = window.nodes = flatten(root);
        var links = window.links = d3.layout.tree().links(nodes);

        // __updatelinks(links);

        // Restart the force layout.
        force
            .nodes(nodes)
            .links(links)
            .start();




        // Update the links…
        link = link.data(links, function(d) { return d.target.id; });

        // Exit any old links.
        link.exit().remove();

        // Enter any new links.
        link.enter().insert("line", ".node")
            .attr("class", "link")
            .attr("x1", function(d) { return d.source.x; })
            .attr("y1", function(d) { return d.source.y; })
            .attr("x2", function(d) { return d.target.x; })
            .attr("y2", function(d) { return d.target.y; });

        // Update the nodes…
        node = node.data(nodes, function(d) { return d.id; }).style("fill", color);

        // Exit any old nodes.
        node.exit().remove();

        // Enter any new nodes.
        node.enter().append("circle")
            .attr("class", "node")
            .attr("cx", function(d) { return d.x; })
            .attr("cy", function(d) { return d.y; })
            .attr("r", function(d) {
                var size = 4.5;
                var res = Math.sqrt(d.children.length * size);
                return res < size ? size : res;
            })
            .style("fill", color)
            .on("click", click)
            .on("mouseover", handleMouseOver)
            .on("mouseout", handleMouseOut)
                .call(force.drag);

        // node.enter().append("text")
        //     .attr("dx", function(d){return d.x; })
        //     .attr("dy", function(d){return d.y; })
        //     .text(function(d){return d.name});
    }

    function tick() {
        link.attr("x1", function(d) { return d.source.x; })
            .attr("y1", function(d) { return d.source.y; })
            .attr("x2", function(d) { return d.target.x; })
            .attr("y2", function(d) { return d.target.y; });

        node.attr("cx", function(d) { return d.x; })
            .attr("cy", function(d) { return d.y; });
    }

    // Color leaf nodes orange, and packages white or blue.
    function color(d) {
        return d._children ? "#3182bd" : d.children ? "#c6dbef" : "#fd8d3c";
    }

    // Toggle children on click.
    function click(d) {
        if (!d3.event.defaultPrevented) {
            if (d.children) {
                d._children = d.children;
                d.children = null;
            } else {
                d.children = d._children;
                d._children = null;
            }
            update();
        }
    }

    var currentNode;

    // Create Event Handlers for mouse
    function handleMouseOver(d, i) {  // Add interactivity

        if(currentNode){
            currentNode.remove();  // Remove text location
        }

        // Use D3 to select element, change color and size
        d3.select(this).attr({
            fill: "orange",
            // r: 15
        });

        // Specify where to put label of text
        currentNode = svg.append("text").attr({
            id: d.name,  // Create an id for text so we can select it later for removing on mouseout
            x: function() { return d.x + 10; },
            y: function() { return d.y - 15; }
        })
            .text(d.name);
    }



    function handleMouseOut(d, i) {
        // Use D3 to select element, change color back to normal
        d3.select(this).attr({
            fill: "black",
            r: function(d) {
                var size = 4.5;
                var res = Math.sqrt(d.children.length * size);
                return res < size ? size : res;
            }
        });

        // Select text by id and then remove
        currentNode.remove();  // Remove text location
        currentNode = null;
    }


    // Returns a list of all nodes under the root.
    function flatten(root) {
        var nodes = [], i = 0;

        function recurse(node) {
            if (node.children) node.children.forEach(recurse);
            if (!node.id) node.id = ++i;
            nodes.push(node);
        }

        recurse(root);
        return nodes;
    }


</script>