source: trunk/LATMOS-Accounts-Web/root/html/summary/tree/index.tt @ 2121

<div id="d3viz" style="clear: both; border : solid;"></div>
<script type="text/javascript">

function loadgraph() {

    var w = 1000,
        h = 800;

    $("#d3viz").empty();

    var vis = d3.select("#d3viz").append("svg")
        .attr("width", w)
        .attr("height", h);

    var force = self.force = d3.layout.force()
        .distance(100)
        .charge(-1000)
        .size([w, h]);

   //zoom
    vis.append("rect")
            .attr("class", "overlay")
            .attr("width", w)
            .attr("height", h)
            .attr("fill", "white")
            .call(d3.behavior.zoom()
            .scaleExtent([0.3, 3])
            .on("zoom", function() {
            vis.attr("transform", "translate(" + d3.event.translate +
              ")scale(" + d3.event.scale + ")");
            }));

     vis = vis.append("g");

    d3.json("[% c.uri_for('/json/tree', ci.id, { json => 1 }) %]", function(error, json) {

        force
            .nodes(json.nodes)
            .links(json.links)
            .start();

     // build the arrow.
     vis.append("svg:defs").selectAll("marker")
         .data(["rel","sub"])
       .enter().append("svg:marker")
         .attr("stroke", arrowcolor() )
         .attr("id", function(d) { return "end" + d ; })
         .attr("viewBox", "-5 -13 10 10")
         .attr("refX", 15)
         .attr("refY", -1.5)
         .attr("markerWidth", 16)
         .attr("markerHeight", 16)
         .attr("orient", "auto")
       .append("svg:path")
         .attr("d", "M-5,-7L5,-2L-5,3");

    //build link + arrow 
    var link = vis.selectAll(".link")
        .data(json.links)
        .enter().append("line")
        .attr("stroke", function(d) {
                return d.color ? d.color : 'black'
        })
            .attr("stroke-dasharray", "0,2 1")
        .attr("class", function(d) { return "link" + d.type; })
        .attr("marker-end", function(d) { return "url(#end" + d.type + ")"; });

    // build the tooltip.
    var div = d3.select("#d3viz").append("div")
            .attr("class", "tooltip")
            .style("opacity", 0);

    //build node
    var node = vis.selectAll(".node")
        .data(json.nodes)
        .enter().append("g")
        .attr("class", "node")
        .call(force.drag)
        .on("contextmenu", function(d) {
            div.transition()
                .duration(700)
                .style("opacity", .9);
            div .html("<b>Name = </b>" + d.name)
                .style("left", (d3.event.pageX) + "px")
                .style("top", (d3.event.pageY - 28) + "px");
            d3.event.preventDefault();
            })
        .on("mouseout", function(d) {
            div.transition()
                .delay(1000)
                .duration(300)
                .style("opacity", 0);
        });

    node.append("image")
        .attr("class", "circle")
        .attr("xlink:href", function(d){ return d.img_href })
        .attr("x", "-16px")
        .attr("y", "-16px")
        .attr("width", "32px")
        .attr("height", "32px");

    node.append("text")
        .attr("class", "nodetext")
        .attr("dx", 16)
        .attr("dy", ".35em")
        .text(function(d) { return d.label })
        .on("click", openLink() );

    force.on("tick", function() {
      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("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
    });
    function openLink() {
        return function(d) {
            //window.open("[% c.uri_for('/ci/link/') %]" + d.label, "_self")
        }
    } 
    //Arrow color
    function arrowcolor() {
        return function(d) {
            var color = "black";
            if(d == "rel") {
                 color = "red";
            } else if(d == "sub") {
                color = "green"; 
            }
            return color;
        }
    }

    //link color
    function linkcolor() {
        return function(d) {
            var color = "black";
            if(d.type == "rel") {
                 color = "red";
            } else if(d.type == "sub") {
                color = "green"; 
            }
            return color;
        }
    }

});

}

loadgraph();
</script>