Changeset 8000


Ignore:
Timestamp:
12/22/13 16:53:29 (6 years ago)
Author:
kent1
Message:

On ajoute le slide de début signalant la différence entre date de naissance et le début des données

On améliore un peu l'animation

On crée une fonction infobox_update qui :

  • modifie le html de l'infobox;
  • mets les liens de l'infobox en target _blank;
  • réduit les oembed dans l'infobox;
  • recentre l'infobox dans la page;
  • appelle une fonction de callback si fournie;

On utilise les transitions jquery pour fadein et fadeout plutot que celles de d3.js

On utilise "jQuery" plutot que "$"

Location:
plugins_spip/terraeco_infographie/trunk
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • plugins_spip/terraeco_infographie/trunk/css/infographie.css

    r7996 r8000  
    377377}
    378378
     379.infobox small{
     380        font-size:.8em;
     381}
    379382.infobox .close_box{
    380383        float:right;
  • plugins_spip/terraeco_infographie/trunk/infographie.html

    r7999 r8000  
    9292                                        <div id="graph1" class="aGraph" style="position:relative;width:100%;"></div>
    9393                                        <script>
    94                                                 var containerid='graph1',values = [],values1 = [], values2 = [],values_commentaire= [], value_naissance = [], value_origine = [],container,tip,ligne_naissance_groupe,ligne_naissance,ligne_interactive;
     94                                                var containerid='graph1',infobox_class='infobox',values = [],values1 = [], values2 = [],values_commentaire= [], value_naissance = [], value_origine = [],container,tip,ligne_naissance_groupe,ligne_naissance,ligne_interactive;
    9595                                                var naissance = date_origine = [(#ENV{naissance,#GET{naissance_min}}|<{#GET{naissance_min}}|?{#GET{naissance_min},#ENV{naissance}}|intval)],
    9696                                                        centre_origine = 1962,translate_defaut = 0;
    9797                                                var margin = {top: 0, right: 5, bottom: 60, left: 5},
    98                                                         width = $('#'+containerid).width() - margin.left - margin.right,
    99                                                         step = parseInt(width/22),
    100                                                         width = 22*step,
     98                                                        graph_width = jQuery('#'+containerid).width() - margin.left - margin.right,
     99                                                        step = graph_width/22,
    101100                                                        height = 450 - margin.top - margin.bottom,
    102                                                         moving = false;
    103 
    104                                                 $('#'+containerid).on('mousewheel', function(event) {
    105                                                         if($('.infobox').is(':hidden') && moving == false){
    106                                                                 if(event.deltaX > 0)
     101                                                        vitesse = 200,
     102                                                        infobox = tip = moving = infobox_bloquee = move_again = false;
     103
     104                                                jQuery('#'+containerid).on('mousewheel', function(event) {
     105                                                        if(jQuery('.'+infobox_class).is(':hidden') && moving == false){
     106                                                                if(event.deltaX > 0 || event.deltaY > 0)
    107107                                                                        var val = 1;
    108                                                                 else if(event.deltaX < 0)
    109                                                                         var val = -1;
    110                                                                 else if(event.deltaY > 0)
    111                                                                         var val = 1;
    112                                                                 else if(event.deltaY < 0)
     108                                                                else if(event.deltaX < 0 || event.deltaY < 0)
    113109                                                                        var val = -1;
    114110                                                                graph_replace(val);
     111                                                        }else if(jQuery('.'+infobox_class).is(':hidden') && move_again == false){
     112                                                                move_again = true;
    115113                                                        }
    116114                                                        return false;
    117115                                                });
    118116                                               
     117                                                // Mise à jour de l'infobox si elle existe
     118                                                function infobox_update(content,callback){
     119                                                        if(infobox){
     120                                                                // On met le contenu
     121                                                                jQuery('.'+infobox_class).html(content);
     122                                                               
     123                                                                // Les lien en target="_blank"
     124                                                                jQuery('.'+infobox_class+' a').click(function(){
     125                                                                        jQuery(this).attr('target','_blank');
     126                                                                });
     127                                                               
     128                                                                // Les oembed en 100%
     129                                                                jQuery('.'+infobox_class+' iframe').each(function(){
     130                                                                        var ratio = jQuery(this).parents('div').width()/jQuery(this).width();
     131                                                                        jQuery(this).width('100%').height(jQuery(this).height()*ratio);
     132                                                                });
     133                                                               
     134                                                                // On la replace en hauteur
     135                                                                var margin_top = (jQuery('#'+containerid+' svg').outerHeight()-jQuery('.legende').height()-35-jQuery('.'+infobox_class).outerHeight())/2;
     136                                                                jQuery('.'+infobox_class).css({'margin-top':margin_top});
     137                                                               
     138                                                                // Si on a donné une fonction comme callback => on l'exécute
     139                                                                if(typeof(callback) == 'function') callback();
     140                                                        }
     141                                                }
     142
    119143                                                // Avance le graph de 1 ou le recule de -1 (en année)
    120144                                                function graph_replace(valeur){
     
    140164                                                        var translatex = x(value_origine.axe_x)-x(d.axe_x)-translate_defaut;
    141165
    142                                                         $('.tooltip').text(+parseFloat(d.axe_y).toFixed(2)+'#UNITE');
    143                                                         console.log(parseFloat(d.axe_y).toFixed(2)+'#UNITE');
    144                                                         var left = x(value_naissance.axe_x)-translate_defaut-$('.tooltip').outerWidth()+5;
    145                                                         var top = y(d.axe_y) - ($('.tooltip').outerHeight()/2);
    146                                                         if($('.tooltip').is(':hidden'))
    147                                                                 $('.tooltip').css({'top':top,'left':left}).show();
     166                                                        jQuery('.tooltip').text(+parseFloat(d.axe_y).toFixed(2)+'#UNITE');
     167                                                        var left = x(value_naissance.axe_x)-translate_defaut-jQuery('.tooltip').outerWidth()+5;
     168                                                        var top = y(d.axe_y) - (jQuery('.tooltip').outerHeight()/2);
     169                                                        if(jQuery('.tooltip').is(':hidden'))
     170                                                                jQuery('.tooltip').css({'top':top,'left':left}).show();
    148171                                                        else
    149                                                                 $('.tooltip').animate({'top':top,'left':left},400);
    150                                                        
    151                                                         // Si on a un commentaire, on l'affiche
     172                                                                jQuery('.tooltip').animate({'top':top,'left':left},vitesse);
     173                                                       
     174                                                        // Si on a un commentaire, on l'affiche Ã  peu prÚs au moment de l'arrivée sur le point en question
    152175                                                        if(typeof(d.commentaire) == 'string' && d.commentaire.length > 1){
    153176                                                                var show_info = function(){
    154                                                                         infobox
    155                                                                                 .html('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="logo">'+d.logo+'</div><div class="contenu"><span class="annee">'+d.axe_x+'</span>'+d.commentaire+'</div>');
    156                                                                         jQuery('.contenu a').click(function(){
    157                                                                                 jQuery(this).attr('target','_blank');
    158                                                                         });
    159                                                                         jQuery('iframe').each(function(){
    160                                                                                 var ratio = jQuery(this).parents('div').width()/jQuery(this).width();
    161                                                                                 jQuery(this).width('100%').height(jQuery(this).height()*ratio);
    162                                                                         });
    163                                                                         margin_top = (jQuery('#'+containerid+' svg').outerHeight()-$('.legende').height()-35-jQuery('.infobox').outerHeight())/2;
    164                                                                         jQuery('.infobox').css({'margin-top':margin_top});
    165                                                                         infobox
    166                                                                                 .transition()
    167                                                                                 .duration(800)
    168                                                                                 .style("display", 'block').each("end", function(){
    169                                                                                         d3.select("#"+containerid).select('.infobox .close_box').on('click',function(){
    170                                                                                                 infobox
    171                                                                                                         .transition()
    172                                                                                                         .duration(500)
    173                                                                                                                 .style("display", 'none');
     177                                                                        infobox_update('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="logo">'+d.logo+'</div><div class="contenu"><span class="annee">'+d.axe_x+'</span>'+d.commentaire+'</div>',
     178                                                                                function(){
     179                                                                                        jQuery('.'+infobox_class).fadeIn(500,function(){
     180                                                                                                jQuery('.'+infobox_class+' .close_box').on('click',function(){
     181                                                                                                        jQuery('.'+infobox_class).fadeOut();
     182                                                                                                });
    174183                                                                                        });
    175                                                                                 });
     184                                                                                }
     185                                                                        );
     186                                                                }
     187                                                                setTimeout(show_info,vitesse);
     188                                                        }
     189                                                       
     190                                                        d3.select(".paths").transition()
     191                                                                .duration(vitesse)
     192                                                                .attr("transform", "translate("+translatex+", 0)").each("end", function(){
     193                                                                        if(move_again && jQuery('.'+infobox_class).is(':hidden')){
     194                                                                                move_again = false
     195                                                                                graph_replace(valeur);
     196                                                                        }else{
     197                                                                                move_again = false
     198                                                                                moving = false;
    176199                                                                        }
    177                                                                 setTimeout(show_info,400);
    178                                                         }
    179                                                        
    180                                                         d3.select(".paths").transition()
    181                                                                 .duration(400)
    182                                                                 .attr("transform", "translate("+translatex+", 0)").each("end", function(){
    183                                                                         moving = false;
    184200                                                                });
    185201
     
    191207                                                                                if(degres.charAt(0) == '-'){
    192208                                                                                        degres = degres.replace('-','');
    193                                                                                         var texte_fin = "Vous êtes né(e) en "+[(#ENV{naissance})]+". Depuis votre naissance,<br /> la température à la surface du globe<br />a diminué de "+degres+" degrés.";
     209                                                                                        var texte_fin = "<p>Vous êtes né(e) en "+[(#ENV{naissance})]+". Depuis votre naissance,<br /> la température à la surface du globe<br />a diminué de "+degres+"°.</p>";
    194210                                                                                }else
    195                                                                                         var texte_fin = "Vous êtes né(e) en "+[(#ENV{naissance})]+". Depuis votre naissance,<br /> la température à la surface du globe<br />a augmenté de "+degres+" degrés.";
     211                                                                                        var texte_fin = "<p>Vous êtes né(e) en "+[(#ENV{naissance})]+". Depuis votre naissance,<br /> la température à la surface du globe<br />a augmenté de "+degres+"°.</p>";
    196212                                                                        }
    197213                                                                        else if([(#ENV{naissance})] < values[0].axe_x && [(#ENV{donnees,1})] == 1){
     
    200216                                                                                if(degres.charAt(0) == '-'){
    201217                                                                                        degres = degres.replace('-','');
    202                                                                                         var texte_fin = "Vous êtes né(e) en "+[(#ENV{naissance})]+". Depuis vos "+age+" ans,<br /> la température à la surface du globe<br />a diminué de "+degres+" degrés.";
     218                                                                                        var texte_fin = "<p>Vous êtes né(e) en "+[(#ENV{naissance})]+". Depuis vos "+age+" ans,<br /> la température à la surface du globe<br />a diminué de "+degres+"°.</p>";
    203219                                                                                }else
    204                                                                                         var texte_fin = "Vous êtes né(e) en "+[(#ENV{naissance})]+". Depuis vos "+age+" ans,<br /> la température à la surface du globe<br />a augmenté de "+degres+" degrés.";
     220                                                                                        var texte_fin = "<p>Vous êtes né(e) en "+[(#ENV{naissance})]+". Depuis vos "+age+" ans,<br /> la température à la surface du globe<br />a augmenté de "+degres+"°.</p>";
    205221                                                                        }
    206222                                                                        else if([(#ENV{naissance})] > values[0].axe_x && [(#ENV{donnees,1})] == 2){
    207223                                                                                var ppm = (parseFloat(values[values.length-1].axe_y) - parseFloat(value_naissance.axe_y)).toFixed(2);
    208                                                                                 var texte_fin = "Vous êtes né(e) en "+[(#ENV{naissance})]+". Depuis votre naissance,<br /> la concentration de CO2 dans l'atmosphÚre<br />a augmenté de "+ppm+" particules par millions.";
     224                                                                                var texte_fin = "<p>Vous êtes né(e) en "+[(#ENV{naissance})]+". Depuis votre naissance,<br /> la concentration de CO2 dans l'atmosphÚre<br />a augmenté de "+ppm+" particules par millions.</p>";
    209225                                                                        }
    210226                                                                        else if([(#ENV{naissance})] < values[0].axe_x && [(#ENV{donnees,1})] == 2){
    211227                                                                                var ppm = (parseFloat(values[values.length-1].axe_y) - parseFloat(value_naissance.axe_y)).toFixed(2);
    212228                                                                                var age = (parseInt([(#ENV{naissance})]) - parseFloat(value_naissance.axe_x)).toString().replace('-','');
    213                                                                                 var texte_fin = "Vous êtes né(e) en "+[(#ENV{naissance})]+". Depuis vos "+age+" ans,<br /> la concentration de CO2 dans l'atmosphÚre<br />a augmenté de "+ppm+" en particules par millions.";
     229                                                                                var texte_fin = "<p>Vous êtes né(e) en "+[(#ENV{naissance})]+". Depuis vos "+age+" ans,<br /> la concentration de CO2 dans l'atmosphÚre<br />a augmenté de "+ppm+" en particules par millions.</p>";
    214230                                                                        }
    215 
     231                                                                       
     232                                                                        move_again = false
     233                                                                        moving = false;
     234                                                                       
    216235                                                                        if(texte_fin){
    217                                                                                 infobox
    218                                                                                         .html('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="contenu contenu_fin">'+texte_fin+'</div>');
    219                                                                                 jQuery('.contenu a').click(function(){
    220                                                                                         jQuery(this).attr('target','_blank');
    221                                                                                 });
    222                                                                                 margin_top = (jQuery('#'+containerid+' svg').outerHeight()-$('.legende').height()-35-jQuery('.infobox').outerHeight())/2;
    223                                                                                 jQuery('.infobox').css({'margin-top':margin_top});
    224                                                                                 infobox
    225                                                                                         .transition()
    226                                                                                                 .duration(800)
    227                                                                                                 .style("display", 'block').each("end", function(){
    228                                                                                                         d3.select("#"+containerid).select('.infobox .close_box').on('click',function(){
    229                                                                                                                 infobox
    230                                                                                                                         .transition()
    231                                                                                                                         .duration(500)
    232                                                                                                                                 .style("display", 'none');
     236                                                                                infobox_update('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="contenu contenu_fin">'+texte_fin+'</div>',
     237                                                                                        function(){
     238                                                                                                jQuery('.'+infobox_class).fadeIn(500,function(){
     239                                                                                                        jQuery('.'+infobox_class+' .close_box').on('click',function(){
     240                                                                                                                jQuery('.'+infobox_class).fadeOut();
    233241                                                                                                        });
    234242                                                                                                });
     243                                                                                        });
    235244                                                                        }
    236245                                                                }
    237                                                                 setTimeout(show_info,400);
     246                                                                setTimeout(show_info,vitesse);
    238247                                                        }
    239248                                                }
     
    251260                                                // Add an SVG element with the desired dimensions and margin.
    252261                                                var svg = d3.select("#"+containerid).append("svg")
    253                                                         .attr("width", width + margin.left + margin.right)
     262                                                        .attr("width", graph_width )
    254263                                                        .attr("height", height + margin.top + margin.bottom)
    255264                                                        .append("g")
    256265                                                        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    257266
    258                                                 var paths = svg.append("g")
    259                                                         .attr("class", "paths")
     267                                                var paths = svg.append("g").attr("class", "paths")
    260268                                                       
    261269                                                // Ajouter le tooltip que l'on cache automatiquement
     
    264272                                                        .style("display", 'none');
    265273                                               
    266                                                 // Ajouter l'infobox pour les anecdotes que l'on cache automatiquement
     274                                                // Ajout de l'infobox'
    267275                                                infobox = d3.select('#'+containerid).append("div")
    268                                                         .attr("class", "infobox")
    269                                                         .html('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="contenu contenu_fin"><:terraeco:anecdote_scroll:></div>');
    270                                                 jQuery('.contenu a').click(function(){
    271                                                         jQuery(this).attr('target','_blank');
    272                                                 });
    273                                                
    274                                                 margin_top = (jQuery('#'+containerid+' svg').outerHeight()-$('.legende').height()-35-jQuery('.infobox').outerHeight())/2;
    275                                                 jQuery('.infobox').css({'margin-top':margin_top});
     276                                                                .attr("class", infobox_class)
     277                                                                .style("display", 'none');
    276278
    277279                                                // Au click sur le graph, on cache l'infobox si visible
    278280                                                jQuery('#'+containerid).on('click',function(){
    279                                                         if(jQuery('.infobox').is(':visible'))
    280                                                                 jQuery('.infobox').fadeOut();
     281                                                        if(jQuery('.'+infobox_class).is(':visible')){
     282                                                                if(infobox_bloquee){
     283                                                                        jQuery('.'+infobox_class).fadeOut(500,function(){
     284                                                                                infobox_bloquee = false;
     285                                                                                infobox_update('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="contenu contenu_fin"><:terraeco:anecdote_scroll:></div>')
     286                                                                                jQuery('.'+infobox_class).fadeIn(500);
     287                                                                        });
     288                                                                }
     289                                                                else
     290                                                                        jQuery('.'+infobox_class).fadeOut();
     291                                                        }
    281292                                                });
    282293                                               
     
    287298                                               
    288299                                                // Au click sur les fleches on avance d'un cran ou on recule
    289                                                 $('.arrows_nav > div').on('click',function(){
    290                                                         if($('.infobox').is(':hidden') && moving == false){
    291                                                                 if($(this).is('.left'))
     300                                                jQuery('.arrows_nav > div').on('click',function(){
     301                                                        if(jQuery('.'+infobox_class).is(':hidden') && moving == false){
     302                                                                if(jQuery(this).is('.left'))
    292303                                                                        graph_replace(-1);
    293304                                                                else
     
    353364                                                        });
    354365
    355                                                         real_width = (width/22)*(xmax-xmin);
     366                                                        real_width = (graph_width/22)*(xmax-xmin);
    356367                                                        x.range([0, real_width]).domain([parseInt(xmin), parseInt(xmax)]);
    357368                                                        y.domain([ymin, ymax]).nice();
     
    359370                                                        translate_defaut = x(d.axe_x);
    360371
     372                                                        // Afficher le premier slide ou les infos de scroll
     373                                                        var annee_debut =  values[0].axe_x;
     374                                                        if([(#ENV{naissance})] > values[0].axe_x && [(#ENV{donnees,1})] == 1){
     375                                                                var degres = (parseFloat(value_naissance.axe_y) - parseFloat(values[0].axe_y)).toFixed(2);
     376                                                                if(degres.charAt(0) == '-'){
     377                                                                        degres = degres.replace('-','');
     378                                                                        var texte_debut = "<p>Entre "+annee_debut+"* et votre naissance,<br /> la température à la surface du globe<br />a diminué de "+degres+"°.<br /></p><p><small>* Début des relevés de l'Agence américaine océanique et atmosphérique (NOAA)</small></p>";
     379                                                                }else
     380                                                                        var texte_debut = "<p>Entre "+annee_debut+"* et votre naissance,<br /> la température à la surface du globe<br />a augmenté de "+degres+"°.<br /></p><p><small>* Début des relevés de l'Agence américaine océanique et atmosphérique (NOAA)</small></p>";
     381                                                        }
     382                                                        else if([(#ENV{naissance})] > values[0].axe_x && [(#ENV{donnees,1})] == 2){
     383                                                                var ppm = (parseFloat(values[values.length-1].axe_y) - parseFloat(value_naissance.axe_y)).toFixed(2);
     384                                                                var texte_debut = "<p>Entre "+annee_debut+"* et votre naissance,<br /> a concentration de CO2 dans l'atmosphÚre<br />a augmenté de "+ppm+" particules par million.<br /></p><p><small>* Début des relevés de l'Agence américaine océanique et atmosphérique (NOAA)</small></p>";
     385                                                        }
     386                                                       
     387                                                        if(texte_debut){
     388                                                                infobox_update('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="contenu contenu_fin">'+texte_debut+'</div>',function(){
     389                                                                        infobox_bloquee = true;
     390                                                                        jQuery('.'+infobox_class).fadeIn(500,function(){
     391                                                                                jQuery('.'+infobox_class+' .close_box').on('click',function(){
     392                                                                                        jQuery('.'+infobox_class).fadeOut(500,function(){
     393                                                                                                infobox_bloquee = false;
     394                                                                                                infobox_update('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="contenu contenu_fin"><:terraeco:anecdote_scroll:></div>')
     395                                                                                                jQuery('.'+infobox_class).fadeIn(500);
     396                                                                                        });
     397                                                                                });
     398                                                                        });
     399                                                                });
     400                                                        }
     401                                                        else{
     402                                                                // Ajouter l'infobox pour les anecdotes que l'on cache automatiquement
     403                                                                infobox_update('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="contenu contenu_fin"><:terraeco:anecdote_scroll:></div>',function(){
     404                                                                        jQuery('.'+infobox_class).fadeIn();
     405                                                                });
     406                                                        }
    361407                                                        draw(translate_defaut);
    362408                                                        drawlines_interaction(translate_defaut);
     
    390436                                                                        .attr("dy", "-0.6em")
    391437                                                                        .attr("dx", "1em")
    392                                                                         .attr("transform", function(d) {
    393                                                                                 return "rotate(-270)"
    394                                                                         });
     438                                                                        .attr("transform", function(d) { return "rotate(-270)" });
    395439                                                        // Ajout d'une class 'tickold' sur les labels de l'axe X plus vieux que la naissance
    396                                                         $('.x .tick text').each(function(){
    397                                                                 if(parseInt($(this).text()) < value_naissance.axe_x){
    398                                                                         $(this).parent('.tick').attr('class','tick tickold');
    399                                                                 }
     440                                                        jQuery('.x .tick text').each(function(){
     441                                                                if(parseInt(jQuery(this).text()) < value_naissance.axe_x)
     442                                                                        jQuery(this).parent('.tick').attr('class','tick tickold');
    400443                                                        });
    401444                                                       
     
    420463                                                                        .attr('r',6)
    421464                                                                        .on('click',function(d){
    422                                                                                 d3.select('.infos_dots .active')
    423                                                                                         .transition().duration(300).attr('stroke-width','3');
    424                                                                                 d3.select(this)
    425                                                                                         .transition().duration(400).attr('stroke-width','5');
    426                                                                                 infobox
    427                                                                                         .html('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="logo">'+d.logo+'</div><div class="contenu"><span class="annee">'+d.axe_x+'</span>'+d.commentaire+'</div>');
    428                                                                                 jQuery('.contenu a').click(function(){
    429                                                                                         jQuery(this).attr('target','_blank');
    430                                                                                 });
    431                                                                                 jQuery('iframe').each(function(){
    432                                                                                         var ratio = jQuery(this).parents('div').width()/jQuery(this).width();
    433                                                                                         jQuery(this).width('100%').height(jQuery(this).height()*ratio);
    434                                                                                 });
    435                                                                                 margin_top = (jQuery('#'+containerid+' svg').outerHeight()-$('.legende').height()-35-jQuery('.infobox').outerHeight())/2;
    436                                                                                 jQuery('.infobox').css({'margin-top':margin_top});
    437                                                                                 infobox
    438                                                                                         .transition()
    439                                                                                         .duration(1000)
    440                                                                                         .style("display", 'block');
    441                                                                                 d3.select("#"+containerid).select('.infobox .close_box').on('click',function(){
    442                                                                                         d3.select('.infos_dots .active').classed("active", false)
    443                                                                                                 .transition().duration(300).attr('stroke-width','3');
    444                                                                                         infobox
    445                                                                                                 .transition()
    446                                                                                                 .duration(500)
    447                                                                                                         .style("display", 'none');
    448                                                                                 });
     465                                                                                d3.event.stopPropagation();
     466                                                                                if(jQuery('.'+infobox_class).is(':visible'))
     467                                                                                        return false;
     468                                                                               
     469                                                                                jQuery('.infos_dots.active').animate({'stroke-width':3},300).attr('class','infos_dots');
     470                                                                                jQuery(this).animate({'stroke-width':5},300).attr('class','infos_dots active');
     471                                                                                infobox_update('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="logo">'+d.logo+'</div><div class="contenu"><span class="annee">'+d.axe_x+'</span>'+d.commentaire+'</div>',
     472                                                                                        function(){
     473                                                                                                jQuery('.'+infobox_class).fadeIn(500,function(){
     474                                                                                                        jQuery(this).find('.close_box').on('click',function(){
     475                                                                                                                jQuery('.infos_dots.active').attr('class','infos_dots')
     476                                                                                                                        .animate({'stroke-width':'3'},300);
     477                                                                                                                jQuery('.'+infobox_class).fadeOut();
     478                                                                                                        });
     479                                                                                                });
     480                                                                                        }
     481                                                                                );
    449482                                                                        });
    450483
     
    458491                                                                .append("line")
    459492                                                                        .attr( 'class', 'ligne_naissance' )
    460                                                                         .attr("x1", function( d ) {
    461                                                                                 return x( d.axe_x );
    462                                                                         }).attr("x2",function( d ) {
    463                                                                                 return x( d.axe_x );
    464                                                                         }) // vertical line so same value on each
     493                                                                        .attr("x1", function( d ) { return x( d.axe_x ); })
     494                                                                        .attr("x2",function( d ) { return x( d.axe_x ); }) // vertical line so same value on each
    465495                                                                        .attr("y1",80).attr("y2", height);
    466496
     
    480510                                                       
    481511                                                        // Ajout du groupe pour Aujourd'hui
    482                                                         ligne_aujd_groupe = svg.select('.paths').append("g")
    483                                                                 .attr("class", "today-line");
     512                                                        ligne_aujd_groupe = svg.select('.paths').append("g").attr("class", "today-line");
    484513       
    485514                                                        // Ajout de la ligne d'aujourd'hui
     
    488517                                                                .append("line")
    489518                                                                        .attr( 'class', 'ligne_aujd' )
    490                                                                         .attr("x1", function( d ) {
    491                                                                                 return x( d.axe_x );
    492                                                                         }).attr("x2",function( d ) {
    493                                                                                 return x( d.axe_x );
    494                                                                         }) // vertical line so same value on each
     519                                                                        .attr("x1", function( d ) { return x( d.axe_x ); })
     520                                                                        .attr("x2",function( d ) { return x( d.axe_x ); })
    495521                                                                        .attr("y1",80).attr("y2", height);
    496522
     
    512538                                                /**
    513539                                                 * Afficher le bloc d'interaction
     540                                                 *
     541                                                 * @param translatex
    514542                                                 */
    515543                                                function drawlines_interaction(translatex){
     
    524552                                                                        .append("line")
    525553                                                                                .attr('class', 'ligne_interactive')
    526                                                                                 .attr("x1", function(d) {
    527                                                                                         return x( d.axe_x )-translatex;
    528                                                                                 }).attr("x2",function(d) {
    529                                                                                         return x(d.axe_x)-translatex;
    530                                                                                 })
    531                                                                 .attr("y1",100).attr("y2", height);
     554                                                                                .attr("x1", function(d) { return x( d.axe_x )-translatex; })
     555                                                                                .attr("x2",function(d) { return x(d.axe_x)-translatex;})
     556                                                                                .attr("y1",100)
     557                                                                                .attr("y2", height);
    532558                                                        /**
    533559                                                         * Ajouter le triangle
Note: See TracChangeset for help on using the changeset viewer.