Changeset 8040 for plugins_spip


Ignore:
Timestamp:
01/03/14 16:05:36 (6 years ago)
Author:
kent1
Message:

On renomme toutes les fonctions internes en préfixant par climat_

On ajoute une fonction pour créer la ligne de demain, évite de dupliquer du code

On améliore la suppression des lignes et autres objets

On enlève pas mal d'espaces qui se baladent

File:
1 edited

Legend:

Unmodified
Added
Removed
  • plugins_spip/terraeco_infographie/trunk/javascript/infographie.js

    r8036 r8040  
    44        values_perspective2_haute = [], values_perspective2_mediane = [],
    55        margin = {top: 0, right: 60, bottom: 60, left: 0},
    6         graph_width = graph_height = height = ymax = ymax_origine = translate_defaut = step = 0,
     6        graph = {width:0,height:0},
     7        height = ymax = ymax_origine = translate_defaut = step = 0,
    78        vitesse = vitesse_origine = 200,
    89        svg = paths = infobox = tip = tip_perspective = moving = move_again = callback_infobox_close = progress_mousedown = perspective_ok = infobox_fermer = infobox_open = false;
     
    1011// Un générateur de lignes
    1112var line = d3.svg.line()
    12         .x(function(d) { return x(d.axe_x); })
    13         .y(function(d) { return y(d.axe_y); });
     13        .x(function(d) {return x(d.axe_x);})
     14        .y(function(d) {return y(d.axe_y);});
    1415
    1516// Un générateur de zones
    1617var area = d3.svg.area()
    17         .x(function(d) { return x(d.axe_x); })
    18         .y0(function(d) { return y(d.axe_y); })
    19         .y1(function(d) { return y(d.axe_y1); });
    20 
     18        .x(function(d)  {return x(d.axe_x);})
     19        .y0(function(d) {return y(d.axe_y);})
     20        .y1(function(d) {return y(d.axe_y1);});
     21
     22/**
     23 * La fonction d'initialisation de l'infographie
     24 *
     25 * @param string file
     26 *      L'URL du fichier contenant les données à afficher
     27 */
    2128function climat_load_datas(file){
    22         graph_width = jQuery('#'+container_id).width();
    23         graph_height = jQuery('#'+container_id).height();
    24         height = graph_height - margin.top - margin.bottom - 60;
    25        
     29        graph.width = jQuery('#'+container_id).width();
     30        graph.height = jQuery('#'+container_id).height();
     31        height = graph.height - margin.top - margin.bottom - 60;
     32
    2633        x = d3.scale.linear();
    2734        y = d3.scale.linear().range([height, 0]);
     
    3441        // Add an SVG element with the desired dimensions and margin.
    3542        svg = d3.select("#"+container_id).append("svg")
    36                 .attr("width", graph_width )
    37                 .attr("height", height + margin.top + margin.bottom)
     43                .attr("width",graph.width)
     44                .attr("height",height + margin.top + margin.bottom)
    3845                .append("g")
    3946                .attr("transform", "translate("+margin.left+","+margin.top+")");
    4047
    4148        paths = svg.append("g").attr("class", "paths")
    42        
     49
    4350        var defs = svg.append('defs');
    4451        var gradient_perspective1 = defs.append('linearGradient')
     
    8289        d3.json(file, function(error, data) {
    8390                values = data;
    84 
    8591                values.forEach(function(row, i){
    8692                        row.axe_x = parseFloat(row.axe_x).toFixed();
     
    120126                }
    121127
    122                 real_width = (graph_width/22)*(xmax-xmin);
     128                real_width = (graph.width/22)*(xmax-xmin);
    123129                x.range([0, real_width]).domain([parseInt(xmin), parseInt(xmax)]);
    124130                y.domain([ymin, ymax]).nice();
     
    160166                climat_draw(translate_defaut);
    161167                climat_drawlines_interaction(translate_defaut);
    162                 infographie_interactions();
    163                
     168                climat_infographie_interactions();
     169
    164170                if(texte_debut){
    165                         infobox_update('<div class="contenu_fin">'+texte_debut+'</div>',function(){
     171                        climat_infobox_update('<div class="contenu_fin">'+texte_debut+'</div>',function(){
    166172                                        callback_infobox_close = function(){
    167                                                 infobox_update('<div class="contenu_fin">'+infographie_lang.anecdote_scroll+'</div>',function(){
     173                                                climat_infobox_update('<div class="contenu_fin">'+infographie_lang.anecdote_scroll+'</div>',function(){
    168174                                                        jQuery('.'+infobox_class).trigger('infobox_open');
    169175                                                        callback_infobox_close = false;
     
    174180                else
    175181                        // Ajouter l'infobox pour les anecdotes que l'on cache automatiquement
    176                         infobox_update('<div class="contenu_fin">'+infographie_lang.anecdote_scroll+'</div>');
     182                        climat_infobox_update('<div class="contenu_fin">'+infographie_lang.anecdote_scroll+'</div>');
    177183        });
    178184}
    179185
    180 function infobox_update(content,callback){
     186function climat_infobox_update(content,callback){
    181187        if(infobox){
    182188                infobox_open = true;
    183189                // On met le contenu
    184190                jQuery('.'+infobox_class+' .contenu').html(content);
    185                
     191
    186192                // Les lien en target="_blank"
    187193                jQuery('.'+infobox_class+' a').click(function(){
     
    195201                });
    196202               
     203                // On la replace en hauteur
    197204                var xdata_height = d3.select('.x.axis').node().getBBox().height;
    198                 // On la replace en hauteur
    199205                var margin_top = (jQuery('#'+container_id+' svg').outerHeight()-jQuery('.legende').height()-xdata_height-jQuery('.'+infobox_class).outerHeight())/2;
    200206                jQuery('.'+infobox_class).css({'margin-top':margin_top});
    201                
     207
    202208                jQuery('.'+infobox_class).fadeIn(500,function(){
    203209                        // Si on a donné une fonction comme callback => on l'exécute
     
    208214
    209215/**
    210  * Avance le graph de 1 ou le recule de -1 (en année)
    211  * @param valeur
     216 * Avance le graphique ou recule
     217 *
     218 * @param int valeur
     219 *      Si > 0, de combien d'année doit on aller vers l'avant
     220 *      Si < 0, de combien d'année doit on aller vers l'arriÚre
    212221 * @returns {Boolean}
    213222 */
    214 function graph_replace(valeur){
     223function climat_graph_replace(valeur){
    215224        if((!perspective_ok && date_actuelle >= parseInt(values[values.length-1].axe_x)) || (perspective_ok && (parseInt(date_actuelle)+parseFloat(valeur)) > parseInt(values[values.length-1].axe_x)) || infobox_open){
    216225                move_again = moving = false;
     
    221230        date_actuelle = date_actuelle+valeur;
    222231
    223         /**
    224          * A essayer : values.filter
    225          * cf : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
    226          */
    227232        values.every(function(row, i){
    228233                if(parseInt(row.axe_x) == date_actuelle){
     
    232237                return true;
    233238        });
    234        
    235         var translatex = x(value_origine.axe_x)-x(d.axe_x)+parseFloat(translate_defaut);
    236         var valeur_tooltip = parseFloat(d.axe_y).toFixed(2).replace('.',',');
     239
     240        var translatex = x(value_origine.axe_x)-x(d.axe_x)+parseFloat(translate_defaut),
     241                valeur_tooltip = parseFloat(d.axe_y).toFixed(2).replace('.',',');
    237242        jQuery('.tooltip_normal').text(valeur_tooltip+''+infographie_lang.unite);
    238        
     243
    239244        // Si on a un commentaire, on l'affiche à peu prÚs au moment de l'arrivée sur le point en question
    240245        if(typeof(d.commentaire) == 'string' && d.commentaire.length > 1){
    241246                var show_info = function(){
    242                         infobox_update('<div class="logo">'+d.logo+'</div><div class="contenu_anecdote"><span class="annee">'+d.axe_x+'</span>'+d.commentaire+'</div>');
     247                        climat_infobox_update('<div class="logo">'+d.logo+'</div><div class="contenu_anecdote"><span class="annee">'+d.axe_x+'</span>'+d.commentaire+'</div>');
    243248                }
    244249                setTimeout(show_info,vitesse-30);
     
    250255                var left = x(value_origine.axe_x)+parseFloat(translate_defaut)-jQuery('.tooltip_normal').outerWidth();
    251256                if(jQuery('.tooltip_normal').is(':hidden'))
    252                         jQuery('.tooltip_normal').css({'top':tooltip_top,'left':left}).show();
     257                        jQuery('.tooltip_normal').css({'top':tooltip_top,'left':left}).fadeIn();
    253258                else
    254259                        jQuery('.tooltip_normal').animate({'top':tooltip_top,'left':left},vitesse);
     
    258263                                if(move_again && !infobox_open){
    259264                                        move_again = false
    260                                         graph_replace(valeur);
     265                                        climat_graph_replace(valeur);
    261266                                }else
    262267                                        move_again = moving = false;
    263268                        });
    264                 d3.select(".interaction").attr("transform", "translate(0, 1)");
    265                
     269                d3.select(".interaction").attr("transform", "translate(0,1)");
     270
    266271                // Afficher le message de fin de données actuelles
    267272                if(!perspective_ok && date_actuelle == parseInt(values2[values2.length-1].axe_x)){
     
    293298                                        var texte_fin = "<p>"+infographie_lang.texte_info_ppm_augmentation_age_mnt.replace('__annee_naissance__',date_naissance).replace('__age__',age).replace('__ppm__',ppm)+"</p>";
    294299                                }
    295                                
     300
    296301                                move_again = moving = false;
    297                                
     302
    298303                                if(texte_fin){
    299                                         infobox_update('<div class="contenu_fin">'+texte_fin+'</div>',
     304                                        climat_infobox_update('<div class="contenu_fin">'+texte_fin+'</div>',
    300305                                                function(){
    301306                                                                callback_infobox_close = function(){
     
    334339                                if(move_again && !infobox_open){
    335340                                        move_again = false
    336                                         graph_replace(valeur);
     341                                        climat_graph_replace(valeur);
    337342                                }else
    338343                                        move_again = moving = false;
    339344                        });
    340345                if(jQuery('.tooltip_normal').is(':hidden'))
    341                         jQuery('.tooltip_normal').css({'top':tooltip_top,'left':tooltip_left}).show();
     346                        jQuery('.tooltip_normal').css({'top':tooltip_top,'left':tooltip_left}).fadeIn(vitesse);
    342347                else
    343348                        jQuery('.tooltip_normal').animate({'top':tooltip_top,'left':tooltip_left},vitesse);
     
    349354 */
    350355function climat_draw(translatex){
    351         d3.selectAll(".apresnaissance,.avtnaissance,.axis,.birth-line,.today-line,.ligne_naissance,.texte_naissance,.circle_naissance,.infos_dots,.legende,.start-line,.bloc_yaxis").remove();
     356        d3.selectAll(".apresnaissance,.avtnaissance,.axis,.birth-line,.today-line,.dots,.legende,.start-line,.bloc_yaxis").remove();
    352357        d3.select(".paths")
    353358                .attr("transform", "translate("+translatex+", 0)")
     
    370375                .selectAll("text")
    371376                        .style("text-anchor", "start")
    372                         .attr("dy", "-0.6em")
    373                         .attr("dx", "1em")
     377                        .attr("dy", "-0.6em").attr("dx", "1em")
    374378                        .attr("transform", function(d) { return "rotate(-270)" });
    375379       
    376380        svg.select('.x.axis')
    377                 .datum( value_origine )
     381                .datum(value_origine)
    378382                .append("line")
    379                         .attr( 'class', 'axis_postnaissance' )
    380                         .attr("x1", function( d ) { return x( d.axe_x ); })
    381                         .attr("x2",function( d ) { return x( values[values.length-1].axe_x ); }); // vertical line so same value on each
     383                        .attr('class','axis_postnaissance')
     384                        .attr("x1", function(d){ return x(d.axe_x); })
     385                        .attr("x2",function(d){ return x(values[values.length-1].axe_x); }); // vertical line so same value on each
    382386
    383387        // Ajout d'une class 'tickold' sur les labels de l'axe X plus vieux que la naissance
     
    398402                }
    399403        });
    400        
    401         var rectangle = svg.append("rect")
    402                                 .attr("class","bloc_yaxis")
    403                                 .attr("fill","#ffffff")
    404                                 .attr("height", graph_height);
     404
     405        var rectangle = svg.append("rect").attr("class","bloc_yaxis").attr("fill","#ffffff").attr("height", graph.height);
    405406
    406407        // Ajout de l'axe Y
    407        
    408         svg.append("g")
    409                 .attr("class", "y axis")
    410                 .call(yAxis);
     408        svg.append("g").attr("class","y axis").call(yAxis);
    411409
    412410        // On enlÚve les ticks de l'axe y trop haut
     
    416414        });
    417415       
    418         var width_ydata = d3.select('.y.axis').node().getBBox().width;
    419         var right = graph_width-width_ydata;
     416        var width_ydata = d3.select('.y.axis').node().getBBox().width,
     417                right = graph.width-width_ydata;
    420418        d3.select('.y.axis').attr("transform", "translate("+right+",0)");
    421419        d3.select('.bloc_yaxis').attr("x", right).attr("width", width_ydata);
    422420
    423421        // Ajout de la légende des axes
    424         svg.append("text")
    425                 .attr("y",height+55)
    426                 .attr("class", "legende")
    427                 .style("text-anchor", "start")
     422        svg.append("text").attr("y",height+55).attr("class","legende").style("text-anchor", "start")
    428423                .text(infographie_lang.axe_y);
    429424
     425        var dots = svg.select('.paths').append("g").attr("class", "dots");
    430426        // Ajout des points d'Anecdotes cliquables
    431427        // sera certainement à supprimer aprÚs debug
    432         d3.select("#"+container_id).select('.paths')
    433                 .selectAll(".dot")
     428        dots.selectAll(".dot")
    434429                .data(values_commentaire)
    435430                .enter()
    436                         .append('circle')
    437                         .attr("class","infos_dots")
    438                         .attr("cx", function(d) { return x(d.axe_x); })
    439                         .attr("cy",function(d) { return y(d.axe_y); })
    440                         .attr('r',6)
     431                        .append('circle').attr("class","infos_dots").attr('r',6)
     432                        .attr("cx", function(d){return x(d.axe_x);})
     433                        .attr("cy",function(d){return y(d.axe_y);})
    441434                        .on('click',function(d){
    442435                                d3.event.stopPropagation();
    443436                                if(infobox_open) return false;
    444                                
    445                                 jQuery('.infos_dots.active').animate({'stroke-width':3},300).attr('class','infos_dots');
    446                                 jQuery(this).animate({'stroke-width':5},300).attr('class','infos_dots active');
    447                                 infobox_update('<div class="logo">'+d.logo+'</div><div class="contenu_anecdote"><span class="annee">'+d.axe_x+'</span>'+d.commentaire+'</div>',
     437                                jQuery('.infos_dots.active').attr('class','infos_dots');
     438                                jQuery(this).attr('class','infos_dots active');
     439                                climat_infobox_update('<div class="logo">'+d.logo+'</div><div class="contenu_anecdote"><span class="annee">'+d.axe_x+'</span>'+d.commentaire+'</div>',
    448440                                        function(){
    449441                                                callback_infobox_close = function(){
    450                                                         jQuery('.infos_dots.active').attr('class','infos_dots')
    451                                                                 .animate({'stroke-width':'3'},300);
     442                                                        jQuery('.infos_dots.active').attr('class','infos_dots');
    452443                                                }
    453444                                        }
     
    463454                        .datum(value_origine)
    464455                        .append("line")
    465                                 .attr( 'class', 'ligne_naissance second_plan' )
    466                                 .attr("x1", function( d ) { return x( d.axe_x ); })
    467                                 .attr("x2",function( d ) { return x( d.axe_x ); }) // vertical line so same value on each
     456                                .attr('class','ligne_naissance second_plan')
     457                                .attr("x1", function( d ) { return x(d.axe_x); })
     458                                .attr("x2",function( d ) { return x(d.axe_x); }) // vertical line so same value on each
    468459                                .attr("y1",image_naissance.height+10).attr("y2", height);
    469460
     
    553544}
    554545
    555 function infographie_interactions(){
     546function climat_infographie_interactions(){
    556547        // Au click sur les fleches on avance d'un cran ou on recule
    557548        jQuery('.arrows_nav > div')
     
    561552                        if(!infobox_open && moving == false){
    562553                                var direction = jQuery(this).is('.left') ? -1:1;
    563                                 graph_replace(direction);
     554                                climat_graph_replace(direction);
    564555                                progress_mousedown = setInterval(function(){
    565                                                                                 if(!infobox_open) graph_replace(direction);
     556                                                                                if(!infobox_open) climat_graph_replace(direction);
    566557                                                                        }, vitesse);
    567558                        }else if(infobox_open && infobox_fermer){
     
    594585                                if(!infobox_open && moving == false){
    595586                                        var direction = (e.keyCode == 37 || e.keyCode == 40) ? -1 : 1;
    596                                         graph_replace(direction);
     587                                        climat_graph_replace(direction);
    597588                                        progress_mousedown = setInterval(function(){
    598                                                                                         if(!infobox_open) graph_replace(direction);
     589                                                                                        if(!infobox_open) climat_graph_replace(direction);
    599590                                                                                }, vitesse);
    600591                                }else if(infobox_open && infobox_fermer)
     
    618609                if(!infobox_open && moving == false){
    619610                        var direction = (event.deltaY < 0 || event.deltaX > 0) ? 1 : -1;
    620                         graph_replace(direction);
     611                        climat_graph_replace(direction);
    621612                }else if(!infobox_open && !infobox_fermer && move_again == false)
    622613                        move_again = true;
     
    648639                clearInterval(progress_mousedown);
    649640        });
     641}
     642
     643function climat_drawline_demain(){
     644        // Ajout du groupe pour Aujourd'hui
     645        ligne_demain_groupe = svg.select('.paths').append("g").attr("class","tomorrow-line");
     646
     647        // Ajout de la ligne d'aujourd'hui
     648        ligne_demain = ligne_demain_groupe
     649                .datum(values[values.length-1])
     650                .append("line")
     651                        .attr('class','ligne_demain second_plan')
     652                        .attr("x1",function(d) { return x(d.axe_x); })
     653                        .attr("x2",function(d) { return x(d.axe_x); })
     654                        .attr("y1",(image_demain.height+10)).attr("y2",height);
     655
     656        // Ajout de l'image de la bougie
     657        ligne_demain_groupe
     658                .datum(values[values.length-1])
     659                .append("svg:image")
     660                        .attr("xlink:href", image_demain.url)
     661                        .attr("x", function(d){ return x(d.axe_x)-(image_demain.width/2);})
     662                        .attr("width", image_demain.width)
     663                        .attr("height", image_demain.height);
    650664}
    651665
     
    698712                 * - 3 années à la fin pour voir le "DEMAIN"
    699713                 */
    700                 real_width = (graph_width/(parseInt(values[values.length-1].axe_x)-date_origine+12))*(xmax-xmin);
     714                real_width = (graph.width/(parseInt(values[values.length-1].axe_x)-date_origine+12))*(xmax-xmin);
    701715                x.range([0, real_width]).domain([xmin,xmax]);
    702716                y.domain([ymin, ymax]).nice();
     
    800814                                .attr("d", line(values_perspective2_mediane));
    801815
    802                         // Ajout du groupe pour Aujourd'hui
    803                         ligne_demain_groupe = svg.select('.paths').append("g").attr("class","tomorrow-line");
    804 
    805                         // Ajout de la ligne d'aujourd'hui
    806                         ligne_demain = ligne_demain_groupe
    807                                 .datum(values[values.length-1])
    808                                 .append("line")
    809                                         .attr('class','ligne_demain second_plan')
    810                                         .attr("x1",function(d) { return x(d.axe_x); })
    811                                         .attr("x2",function(d) { return x(d.axe_x); })
    812                                         .attr("y1",(image_demain.height+10)).attr("y2",height);
    813 
    814                         // Ajout de l'image de la bougie
    815                         ligne_demain_groupe
    816                                 .datum(values[values.length-1])
    817                                 .append("svg:image")
    818                                         .attr("xlink:href", image_demain.url)
    819                                         .attr("x", function(d){ return x(d.axe_x)-(image_demain.width/2);})
    820                                         .attr("width", image_demain.width)
    821                                         .attr("height", image_demain.height);
     816                        climat_drawline_demain();
    822817                       
    823818                        var legende_perspective_group = svg.select('.paths').append("g").attr("class","legende-perspective");
     
    837832                        var texte_fin = "<div class='contenu_fin'>"+infographie_lang.texte_infos_giec+"</div>";
    838833                       
    839                         infobox_update(texte_fin);
     834                        climat_infobox_update(texte_fin);
    840835                       
    841836                        step = x(values[values.length-1].axe_x)-x(values[values.length-2].axe_x);
     
    870865                 */
    871866                 
    872                 real_width = (graph_width/(parseInt(values[values.length-1].axe_x)-date_origine+12))*(xmax-xmin);
     867                real_width = (graph.width/(parseInt(values[values.length-1].axe_x)-date_origine+12))*(xmax-xmin);
    873868                x.range([0, real_width]).domain([xmin,xmax]);
    874869                y.domain([ymin, ymax]).nice();
     
    908903                                        .attr("d", line(values_perspective2_mediane));
    909904                        // Si on a donné une fonction comme callback => on l'exécute
    910                         // Ajout du groupe pour Aujourd'hui
    911                         ligne_demain_groupe = svg.select('.paths').append("g").attr("class", "tomorrow-line");
    912 
    913                         // Ajout de la ligne d'aujourd'hui
    914                         ligne_demain = ligne_demain_groupe
    915                                 .datum(values[values.length-1])
    916                                 .append("line")
    917                                         .attr("class","ligne_demain second_plan")
    918                                         .attr("x1", function( d ) { return x( d.axe_x ); })
    919                                         .attr("x2",function( d ) { return x( d.axe_x ); })
    920                                         .attr("y1",image_demain.height+10).attr("y2", height);
    921 
    922                         // Ajout de l'image de la bougie
    923                         ligne_demain_groupe
    924                                 .datum(values[values.length-1])
    925                                 .append("svg:image")
    926                                         .attr("xlink:href", image_demain.url)
    927                                         .attr("x", function(d){return x(d.axe_x)-(image_demain.width/2);})
    928                                         .attr("width", image_demain.width)
    929                                         .attr("height", image_demain.height);
     905                       
     906                        climat_drawline_demain();
    930907                       
    931908                        var legende_perspective_group = svg.select('.paths').append("g").attr("class","legende-perspective");
     
    943920                                .text(infographie_lang.texte_estimations_ncdc);
    944921                        var texte_fin = "<div class='contenu_fin'>"+infographie_lang.texte_infos_giec+"</div>";
    945                                 infobox_update(texte_fin);
     922                                climat_infobox_update(texte_fin);
    946923                       
    947924                        perspective_ok = true;
Note: See TracChangeset for help on using the changeset viewer.