source: sipes/0.3-modules/views_semantic/js/dcs.js~ @ 89c313a

/*
 * Implementacion valores iniciales
 */
var webformReport = {};
Drupal.behaviors.webformReport = function (context) {
  build_dcs(Drupal.settings.semantico);
}


function build_dcs(json){

    var w = 740,
        h = 750;
        padding = 10 ;
    var bounds = d3.geom.polygon([
          [padding, padding],
          [padding, h - padding],
          [w - padding, h - padding],
          [w - padding, padding]
        ]);

        var svg = d3.select('#dcs_content') 
                .append("svg:svg")
                .attr("width", w)
                .attr("height", h)
                .style('border','2px solid black').style('background','#FFFFFF');

        var links = [] ;
        var json_docs = json.documents ;
        var clusters = json.clusters ;
        var nodes = [] , anchorNodes = [] ;
        var l = 0;

        var N_foci = clusters.length ,
            y_fac = Math.sqrt(N_foci*4/3) ,
            x_fac = N_foci/y_fac ,
            width_fac = w/(y_fac);
            height_fac = h/(x_fac);


        var foci = d3.range(N_foci).map(function(i){
            return { 
                i: Math.floor(i/x_fac),
                j: Math.floor(i%x_fac),
                x: width_fac/2 + Math.floor(i/x_fac)*width_fac , 
                y: height_fac/2 + Math.floor(i%x_fac)*height_fac              }
        });


        clusters.forEach(function(d,i){
            var documents = d.documents ;
            var N = clusters.length ;
            var len_x = Math.sqrt(1.6*N);
            var px = Math.floor(i%len_x) ;
            var qy = Math.floor(i/len_x);
            var coor_x = d.score+px*w/len_x ;
            var coor_y = d.score+qy*h*len_x/N;

            


            nodes.push({name:d.phrases[0],
                        vert:true,
                        score:d.score,
                        x:coor_x,
                        y:coor_y,
                        id:i,
                        //fixed:true,
                        docs:documents}) ;

            l += i === 0 ? 0 : clusters[i-1].documents.length;
            documents.forEach(function(d,j) {
                nodes.push({name:d,vert:false});
                links.push({ source:i+l , target:i+l+j+1 });
            });


            
        });
        

        var color = d3.scale.category20();
        var path = svg.selectAll("path");
        var circle = svg.selectAll("circle");
        var line = svg.selectAll("line");

        var labels = svg.selectAll("text"); 
        
        var force = d3.layout.force().size([w, h])
                    .nodes(nodes)
                    .links(links)
                    .charge(-50)
                    .gravity(0.07) ;

        nodes.forEach(function(item){
            if(item.vert) {
                anchorNodes.push(item);
            }
        });
        force.start();

        force.on("tick", function(e) {
            var k = .1 * e.alpha;
            //forces2.forEach(function(item){item.start();});
            var vertices = [] ;
            nodes.forEach(function(d,i){
                    if (d.vert) {
                        d.y += (foci[d.id].y - d.y) * k;
                        d.x += (foci[d.id].x - d.x) * k;

                        vertices.push( [d.x,d.y,d] ) ;
                    } 
                });
       
            
            voronoiPol = d3.geom.voronoi(vertices);
            path = path.data(voronoiPol);
            path.enter().insert("path","path") 
                    .attr("d", function(d) { 
                                return "M" + d.join("L") + "Z"; 
                        })
                    .style("fill",function(d,i) { return color(i); } )
                    .on("mousemove",function(d) {
                            var style_str = "fill: " + color(d[0]);
                            style_str += ";fill-opacity:0.4" ;
                            d3.select(this)
                            .attr("style",style_str);  
                    }) 
                    .on("mouseover",function(d) {
                            var style_str = "fill: " + color(d[0]);
                            style_str += ";fill-opacity:0.4" ;
                            d3.select(this)
                            .attr("style",style_str);  
                    }) 
                    .on("mouseout",function(d) {
                            var style_str = "fill: " + color(d[0]);
                            d3.select(this)
                            .attr("style",style_str);  
                    })
                    .on("click",function(d,i) {

/*
                        if ( $('#abajo').length != 0 ) {
                            return ;}
*/
                        var modal_tuits = modal();
                        var html = '<div id="abajo"></div>';
                        modal_tuits.init({ id:'tuits',content: html,top:'300px',left:'-500px' });
                        //modal_tuits.init({ id:'tuits',content: html});
                        $('#abajo').empty();
                        d3.select('#abajo')
                          .append('h2')
                          .attr('class','cluster_title')
                          .append('p').append('b')
                          .text(vertices[i][2].name+':');
                         var lista = d3.select('#abajo').append('ul');
                         vertices[i][2].docs.forEach(function(l,j){
                            var index = json_docs[l].snippet.indexOf(':');
                            var len = json_docs[l].snippet.length;
                            lista.append('li')
//                            d3.select('div#abajo')
/*
                            .append('div')
                            .attr('class','message')
                            .append('span')
                            .attr('class','message-author')
*/
                            .text(json_docs[l].snippet)
                            //.append('span')
                            //.attr('class','message-text')
                            //.text(json_docs[l].snippet.slice(index+1,len));
                            //.text(j+1+") "+json_docs[l].snippet);
                        });

                        
                        /*
                        console.log("\n\n\n",vertices[i][2].name);
                        vertices[i][2].docs.forEach(function(l) {
                            console.log(l,json_docs[l].snippet);
                        });*/
                    })
                    .append("title")
                    .text(function(d,i) { 
                        return vertices[i][2].name;
                    });
            path.attr("d", function(d) { 
                            return "M" + d.join("L") + "Z"; 
                    })
                    .style("fill",function(d,i) { return color(i); } ) 
                    .on("mousemove",function(d) {
                            var style_str = "fill: " + color(d[0]);
                            style_str += ";fill-opacity:0.4" ;
                            d3.select(this)
                            .attr("style",style_str);  
                    }) 
                    .on("mouseover",function(d) {
                            var style_str = "fill: " + color(d[0]);
                            style_str += ";fill-opacity:0.4" ;
                            d3.select(this)
                            .attr("style",style_str);  
                    }) 
                    .on("mouseout",function(d) {
                            var style_str = "fill: " + color(d[0]);
                            d3.select(this)
                            .attr("style",style_str);  
                    })
                    .on("click",function(d,i) {
/*
                        if ( $('#abajo').length != 0 ) {
                            return ;}
*/
//var offset = $(this).offset();
 
                        var modal_tuits = modal();
                        var html = '<div id="abajo"></div>';
                        //modal_tuits.init({ id:'tuits',content: html,top:d.clientX - offset.left,left:d.clientY - offset.top-50});
                        modal_tuits.init({ id:'tuits',content: html});

                        $('#abajo').empty();
                        d3.select('#abajo')
                          .append('h2')
                          .attr('class','cluster_title')
                          .append('p').append('b')
                          .text(vertices[i][2].name+':');
                        var lista = d3.select('#abajo').append('ul');
                        vertices[i][2].docs.forEach(function(l,j){
                            var index = json_docs[l].snippet.indexOf(':');
                            var len = json_docs[l].snippet.length;
                            var referencia = '';
                            if (Drupal.settings.acceso == '1') {
                              var string = json_docs[l].url.replace(/node/g, '');
                              var nid = string.substring(1);
                              var element = "views-semantic-op-" + nid;
                              var referencia = "";
                              for (var options in Drupal.settings.options[element]) {
                                referencia += ' (<a  href="' + Drupal.settings.options[element][options]["link"]+ '"  title="' + Drupal.settings.options[element][options]["name"] + '" alt="' + Drupal.settings.options[element][options]["description"] + '" class="node-' + nid +  ' semantic-element-node ' + Drupal.settings.options[element][options]["class"] + '" target="' + Drupal.settings.options[element][options]["target"] + '">' + Drupal.settings.options[element][options]["name"] + '</a>)';
                              }
                            }
                            lista.append('li')
//                            d3.select('div#abajo')
                            .append('div')
                            .attr('class','message')
                            .append('span')
                            .attr('class','message-author')
                            .text(json_docs[l].snippet.slice(index+1,len))
                            .append('span')
                            .attr('class','message-text')
                            .html(referencia);
                            //.text(j+1+") "+json_docs[l].snippet);
                        });

                        /*
                        console.log("\n\n\n",vertices[i][2].name);
                        vertices[i][2].docs.forEach(function(l) {
                            console.log(l,json_docs[l].snippet);
                        });*/
                    })
                    .append("title")
                    .text(function(d,i) { 
                        return vertices[i][2].name;
                    });
            path.exit().remove();
           
            
            var centers = []
            nodes.forEach(function(d){
                if (!d.vert){
                    centers.push(d);
                }
            });
            labels = labels.data(vertices)
            labels.enter().append("text")
                    .text(function(d){
                        str = d[2].name;
                        return str.length > 15 ? str.slice(0,15) +". . .":str;
                    })
                    .attr("x",function(d){
                        str = d[2].name;
                        str = str.length > 15 ? str.slice(0,15) +". . .":str;
                        return d[0]-str.length*3/2;
                    })
                    .attr("y",function(d){
                        return d[1];
                    })
                    .attr("style",function(d) {
                        size = d[2].weight+12 ;
                        return "font-size:" + size.toString() ;
                    });
                        
                    
            labels.text(function(d){
                        str = d[2].name;
                        return str.length > 15 ? str.slice(0,15) +". . .":str;
                    })
                    .attr("x",function(d){
                        str = d[2].name;
                        str = str.length > 15 ? str.slice(0,15) +". . .":str;
                        return d[0]-str.length*3/2;
                        //return d.x;
                    })
                    .attr("y",function(d){
                        return d[1];
                        //return d.y;
                    })
                    .attr("style",function(d) {
                        size = d[2].weight+12 ;
                        return "font-size:" + size.toString() ;
                    });
            labels.exit().remove();    


            circle = circle.data(centers)
            circle.enter().append("circle")
    //                  .call(force.drag)
                  .attr("r", 10)
                  .attr("cx", function(d) { return d.x; })
                  .attr("cy", function(d) { return d.y; })
                  .transition().duration(1000).attr("r", 3)
            circle.attr("cx", function(d) { return d.x; })
                  .attr("cy", function(d) { return d.y; })
                  .append("title")
                  .text(function(d) { return d.name; });
            circle.exit().transition().attr("r", 30).remove();    
        });
}

function dcs_load_url(post){
    if (post) {
        $.post(BASE_URL+"/dcs_data/", post, function(json) {
            $("#dcs_content").empty();
            build_dcs(json);
        });
    } else {
        $.get(BASE_URL+"/dcs_data/",function(json) {
            $("#dcs_content").empty();
            build_dcs(json);
        });
    }
}