Changeset 8005


Ignore:
Timestamp:
12/24/13 20:25:19 (6 years ago)
Author:
kent1
Message:

On gère le cas où on a une petite date, on conserve toujours 7 ans derrière la ligne de début

On ajoute la ligne de début de données

Les liens externes à l'infographie en target = "_blank"

On ajoute les axe y

On garde la variable "naissance" comme étant celle du formulaire (même avant la date de début), on utilise date_origine pour la date où on commence l'animation et date_actuelle pour la date où l'on se trouve

On ajoute un peu d'espace à la fin de l'animation pour afficher demain dans son entièreté

On met en gras les ticks tous les 10ans, on enlève ceux entre 2012 et 2090

On n'affiche la ligne de naissance que si l'on est né après 1950

Location:
plugins_spip/terraeco_infographie/trunk
Files:
2 edited

Legend:

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

    r8004 r8005  
    275275}
    276276
    277 .x.axis .tick line {
     277.axis .tick_important text{
     278        font-size:1em;
     279        font-weight:700;
     280}
     281
     282.axis .tick line {
    278283  stroke: #f29100;
    279284  fill:#f29100;
    280285}
    281286
    282 .co2 .x.axis .tick line{
     287.axis text{
     288        font: 10px sans-serif;
     289}
     290
     291.axis .axis_postnaissance{
     292        stroke-width:1px;
     293        stroke:#f29100;
     294        fill:#f29100;
     295}
     296
     297.co2 .axis .axis_postnaissance{
    283298        stroke: #3E9B8B;
    284299        fill:#3E9B8B;
    285300}
    286 
    287 .x.axis .tickold line, .co2 .x.axis .tickold line{
     301.co2 .tick line{
     302        stroke: #3E9B8B;
     303        fill:#3E9B8B;
     304}
     305
     306.axis .tickold line, .co2 .axis .tickold line{
    288307        stroke: #cccccc;
    289308}
    290 .x.axis text{
    291         font: 10px sans-serif;
    292 }
    293 
    294 .x.axis .minor {
    295   stroke-opacity: .5;
    296 }
    297 
    298 .x.axis path {
    299   display: none;
    300 }
    301 
    302 .y.axis line, .y.axis path {
    303   fill: none;
    304   stroke: #000;
    305   display:none;
    306 }
    307 
     309
     310.axis path {
     311  fill:none;
     312  stroke:#ededed;
     313}
     314
     315.y.axis path {
     316  stroke:#f29100;
     317}
     318
     319.co2 .y.axis path{
     320        stroke:#3E9B8B;
     321}
    308322/**
    309323 *      Légende de la perspective (recouvrant les ticks)
  • plugins_spip/terraeco_infographie/trunk/infographie.html

    r8004 r8005  
    1717[<script type="text/javascript" src="(#CHEMIN{javascript/jquery.mousewheel.js})"></script>]
    1818[<script type="text/javascript" src="(#CHEMIN{javascript/d3.v3.js})"></script>]
     19<script type="text/javascript">
     20        jQuery(document).ready(function(){
     21                jQuery('a.spip_out').click(function(){
     22                        jQuery(this).attr('target','_blank');
     23                });
     24        });
     25</script>
    1926</head>
    2027
     
    9097                                        #SET{naissance_min,#AXE_X}
    9198                                        </BOUCLE_naissance_min>
    92                                         <div id="graph1" class="aGraph" style="position:relative;width:100%;"></div>
     99                                        <div id="graph1" class="aGraph" style="position:relative;width:100%;height:500px"></div>
    93100                                        <script>
    94101                                                var containerid='graph1',infobox_class='infobox',
    95                                                         values = [],values1 = [],values2 = [], values_commentaire= [], value_naissance = [], value_origine = [],
     102                                                        values = [],values1 = [],values2 = [], values_commentaire= [], value_origine = [], value_actuelle = [],
    96103                                                        values_perspective1_haute = [], values_perspective1_basse = [], values_perspective1_mediane = [],
    97104                                                        values_perspective2_haute = [], values_perspective2_basse = [], values_perspective2_mediane = [],
    98105                                                        tip,ligne_naissance_groupe,ligne_naissance,ligne_interactive;
    99106                                               
    100                                                 var naissance = date_origine = [(#ENV{naissance,#GET{naissance_min}}|<{#GET{naissance_min}}|?{#GET{naissance_min},#ENV{naissance}}|intval)],
    101                                                         centre_origine = 1962, translate_defaut = 0;
     107                                                var date_origine = date_actuelle = [(#ENV{naissance,#GET{naissance_min}}|<{#GET{naissance_min}}|?{#GET{naissance_min},#ENV{naissance}}|intval)],
     108                                                        naissance = [(#ENV{naissance}|intval)],
     109                                                        ymax = ymax_origine = 0, translate_defaut = 0;
    102110                                               
    103                                                 var margin = {top: 0, right: 5, bottom: 60, left: 5},
    104                                                         graph_width = jQuery('#'+containerid).width() - margin.left - margin.right,
    105                                                         step = graph_width/22,
    106                                                         height = 450 - margin.top - margin.bottom,
     111                                                var margin = {top: 0, right: 60, bottom: 60, left: 0},
     112                                                        graph_width = jQuery('#'+containerid).width(),
     113                                                        graph_height = jQuery('#'+containerid).height();
     114                                                        height = graph_height - margin.top - margin.bottom -60,
    107115                                                        vitesse = 200,
    108116                                                        infobox = tip = moving = infobox_bloquee = move_again = progress_mousedown = false;
     
    111119                                                var x = d3.scale.linear(),
    112120                                                        y = d3.scale.linear().range([height, 0]),
    113                                                         xAxis = d3.svg.axis().scale(x).ticks(50).tickFormat(d3.format(".0f")).orient("bottom");
     121                                                        xAxis = d3.svg.axis().scale(x).ticks(50).tickFormat(d3.format(".0f")).orient("bottom"),
     122                                                        yAxis = d3.svg.axis().scale(y).ticks(10).tickFormat(d3.format(".2f")).orient("right");
    114123                                               
    115124                                                // Un générateur de lignes
     
    164173                                                // Avance le graph de 1 ou le recule de -1 (en année)
    165174                                                function graph_replace(valeur){
    166                                                         if(((valeur == '+1') && date_origine >= values2[values2.length-1].axe_x) || ((valeur == '-1') && date_origine  == values[0].axe_x))
     175                                                        if(date_actuelle >= values2[values2.length-1].axe_x)
    167176                                                                return false;
    168                                                         if(date_origine >= values2[values2.length-1].axe_x)
    169                                                                 return false;
     177                                                       
    170178                                                        moving = true;
    171                                                         date_origine = date_origine+valeur;
     179                                                        date_actuelle = date_actuelle+valeur;
    172180
    173181                                                        /**
     
    176184                                                         */
    177185                                                        values.every(function(row, i){
    178                                                                 if(parseInt(row.axe_x) == date_origine){
    179                                                                         value_origine = d = row;
     186                                                                if(parseInt(row.axe_x) == date_actuelle){
     187                                                                        value_actuelle = d = row;
    180188                                                                        return false;
    181189                                                                }
     
    183191                                                        });
    184192                                                       
    185                                                         var translatex = x(value_naissance.axe_x)-x(d.axe_x)-translate_defaut;
     193                                                        var translatex = x(value_origine.axe_x)-x(d.axe_x)+parseFloat(translate_defaut);
    186194
    187195                                                        jQuery('.tooltip').text(+parseFloat(d.axe_y).toFixed(2)+'#UNITE');
    188                                                         var left = x(value_naissance.axe_x)-translate_defaut-jQuery('.tooltip').outerWidth()+5;
     196                                                        var left = x(value_origine.axe_x)+parseFloat(translate_defaut)-jQuery('.tooltip').outerWidth();
    189197                                                        var top = y(d.axe_y) - (jQuery('.tooltip').outerHeight()/2);
    190198                                                        if(jQuery('.tooltip').is(':hidden'))
     
    212220                                                        }
    213221                                                       
    214                                                         d3.select(".paths").transition()
     222                                                        d3.select(".paths")
     223                                                                .transition()
    215224                                                                .duration(vitesse)
    216225                                                                .attr("transform", "translate("+translatex+", 0)").each("end", function(){
     
    223232
    224233                                                        // Afficher le message de fin de données actuelles
    225                                                         if(date_origine == values[values.length-1].axe_x){
     234                                                        if(date_actuelle == parseInt(values[values.length-1].axe_x)){
    226235                                                                var show_info = function(){
    227                                                                         if([(#ENV{naissance})] > values[0].axe_x && [(#ENV{donnees,1})] == 1){
    228                                                                                 var degres = (parseFloat(values[values.length-1].axe_y) - parseFloat(value_naissance.axe_y)).toFixed(2);
     236                                                                        if(naissance > values[0].axe_x && [(#ENV{donnees,1})] == 1){
     237                                                                                var degres = (parseFloat(values[values.length-1].axe_y) - parseFloat(value_origine.axe_y)).toFixed(2);
    229238                                                                                if(degres.charAt(0) == '-'){
    230239                                                                                        degres = degres.replace('-','');
    231                                                                                         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>";
     240                                                                                        var texte_fin = "<p>Vous êtes né(e) en "+naissance+". Depuis votre naissance,<br /> la température à la surface du globe<br />a diminué de "+degres+"°.</p>";
    232241                                                                                }else
    233                                                                                         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>";
     242                                                                                        var texte_fin = "<p>Vous êtes né(e) en "+naissance+". Depuis votre naissance,<br /> la température à la surface du globe<br />a augmenté de "+degres+"°.</p>";
    234243                                                                        }
    235                                                                         else if([(#ENV{naissance})] < values[0].axe_x && [(#ENV{donnees,1})] == 1){
    236                                                                                 var degres = (parseFloat(values[values.length-1].axe_y) - parseFloat(value_naissance.axe_y)).toFixed(2);
    237                                                                                 var age = (parseInt([(#ENV{naissance})]) - parseFloat(value_naissance.axe_x)).toString().replace('-','');
     244                                                                        else if(naissance < values[0].axe_x && [(#ENV{donnees,1})] == 1){
     245                                                                                var degres = (parseFloat(values[values.length-1].axe_y) - parseFloat(value_origine.axe_y)).toFixed(2);
     246                                                                                var age = (parseInt(naissance) - parseFloat(value_origine.axe_x)).toString().replace('-','');
    238247                                                                                if(degres.charAt(0) == '-'){
    239248                                                                                        degres = degres.replace('-','');
    240                                                                                         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>";
     249                                                                                        var texte_fin = "<p>Vous êtes né(e) en "+naissance+". Depuis vos "+age+" ans,<br /> la température à la surface du globe<br />a diminué de "+degres+"°.</p>";
    241250                                                                                }else
    242                                                                                         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>";
     251                                                                                        var texte_fin = "<p>Vous êtes né(e) en "+naissance+". Depuis vos "+age+" ans,<br /> la température à la surface du globe<br />a augmenté de "+degres+"°.</p>";
    243252                                                                        }
    244                                                                         else if([(#ENV{naissance})] > values[0].axe_x && [(#ENV{donnees,1})] == 2){
    245                                                                                 var ppm = (parseFloat(values[values.length-1].axe_y) - parseFloat(value_naissance.axe_y)).toFixed(2);
    246                                                                                 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>";
     253                                                                        else if(naissance > values[0].axe_x && [(#ENV{donnees,1})] == 2){
     254                                                                                var ppm = (parseFloat(values[values.length-1].axe_y) - parseFloat(value_origine.axe_y)).toFixed(2);
     255                                                                                var texte_fin = "<p>Vous êtes né(e) en "+naissance+". Depuis votre naissance,<br /> la concentration de CO2 dans l'atmosphÚre<br />a augmenté de "+ppm+" particules par millions.</p>";
    247256                                                                        }
    248                                                                         else if([(#ENV{naissance})] < values[0].axe_x && [(#ENV{donnees,1})] == 2){
    249                                                                                 var ppm = (parseFloat(values[values.length-1].axe_y) - parseFloat(value_naissance.axe_y)).toFixed(2);
    250                                                                                 var age = (parseInt([(#ENV{naissance})]) - parseFloat(value_naissance.axe_x)).toString().replace('-','');
    251                                                                                 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>";
     257                                                                        else if(naissance < values[0].axe_x && [(#ENV{donnees,1})] == 2){
     258                                                                                var ppm = (parseFloat(values[values.length-1].axe_y) - parseFloat(value_origine.axe_y)).toFixed(2);
     259                                                                                var age = (parseInt(naissance) - parseFloat(value_origine.axe_x)).toString().replace('-','');
     260                                                                                var texte_fin = "<p>Vous êtes né(e) en "+naissance+". Depuis vos "+age+" ans,<br /> la concentration de CO2 dans l'atmosphÚre<br />a augmenté de "+ppm+" en particules par millions.</p>";
    252261                                                                        }
    253262                                                                       
     
    304313                                                                 */
    305314                                                                xmax = values_perspective1_haute[values_perspective1_haute.length-1].axe_x;
    306                                                                 ymax = values_perspective1_haute[values_perspective1_haute.length-1].axe_y;
     315                                                                ymax = ymax_origine = values_perspective1_haute[values_perspective1_haute.length-1].axe_y;
    307316                                                                ymax = (ymax-ymin)*1.25;
    308317                                                               
     
    314323                                                                 * - 3 années à la fin pour voir le "DEMAIN"
    315324                                                                 */
    316                                                                 real_width = (graph_width/(parseInt(values[values.length-1].axe_x)-naissance+10))*(xmax-xmin);
     325                                                                real_width = (graph_width/(parseInt(values[values.length-1].axe_x)-date_origine+10))*(xmax-xmin);
    317326                                                               
    318327                                                                x.range([0, real_width]).domain([xmin, xmax]);
    319                                                                 y.domain([ymin, ymax]).nice();
     328                                                                y.range([height, 0]).domain([ymin, ymax]).nice();
    320329                                                               
    321                                                                 translate_defaut = x(value_origine.axe_x);
    322                                                                 translate_new = x(value_naissance.axe_x-7);
     330                                                                translate_defaut = '-'+x(value_actuelle.axe_x);
     331                                                                translate_new = x(value_origine.axe_x-7)+35;
    323332                                                                /**
    324333                                                                 * On parse la perspective basse
     
    395404                                                                                .attr("class","legende_perspective")
    396405                                                                                .attr("x", x(values2[values2.length-1].axe_x)+12)
    397                                                                                 .attr("y", 390)
     406                                                                                .attr("y", height)
    398407                                                                                .attr("width", x(values[values.length-1].axe_x)-x(values2[values2.length-1].axe_x)-20)
    399408                                                                                .attr("height", 35);
    400409                                                                        var text_rectangle = svg.select('.paths').append("text")
    401410                                                                                .attr("x",x(values[values.length-1].axe_x)-20)
    402                                                                                 .attr("y",410)
     411                                                                                .attr("y",(height+20))
    403412                                                                                .attr("class", "legende_perspective_text")
    404413                                                                                .style("text-anchor", "end")
     
    434443                                                                 */
    435444                                                                xmax = values_perspective1_mediane[values_perspective1_mediane.length-1].axe_x;
    436                                                                 ymax = d3.max(values_perspective1_mediane, function(d) { return parseFloat(d.axe_y).toFixed(2); })*1.25;
    437                                                                
     445                                                                ymax = ymax_origine = d3.max(values_perspective1_mediane, function(d) { return parseFloat(d.axe_y).toFixed(2); });
     446                                                                ymax = (ymax*1.25);
     447
    438448                                                                /**
    439449                                                                 * On change la taille du diagramme pour afficher :
     
    443453                                                                 * - 3 années à la fin pour voir le "DEMAIN"
    444454                                                                 */
    445                                                                 real_width = (graph_width/(parseInt(values[values.length-1].axe_x)-naissance+10))*(xmax-xmin);
     455                                                                real_width = (graph_width/(parseInt(values[values.length-1].axe_x)-date_origine+10))*(xmax-xmin);
    446456                                                               
    447457                                                                x.range([0, real_width]).domain([xmin, xmax]);
    448458                                                                y.domain([ymin, ymax]).nice();
    449459                                                               
    450                                                                 translate_defaut = x(value_origine.axe_x);
    451                                                                 translate_new = x(value_naissance.axe_x-7);
     460                                                                translate_defaut = '-'+x(value_actuelle.axe_x);
     461                                                                translate_new = x(value_origine.axe_x-7)+35;
    452462                                                                /**
    453463                                                                 * On parse la perspective basse
     
    486496                                                                                .datum(values[values.length-1])
    487497                                                                                .append("line")
    488                                                                                         .attr( 'class', 'ligne_demain' )
     498                                                                                        .attr("class","ligne_demain second_plan")
    489499                                                                                        .attr("x1", function( d ) { return x( d.axe_x ); })
    490500                                                                                        .attr("x2",function( d ) { return x( d.axe_x ); })
     
    506516                                                                                .attr("class","legende_perspective")
    507517                                                                                .attr("x", x(values2[values2.length-1].axe_x)+12)
    508                                                                                 .attr("y", 390)
     518                                                                                .attr("y", height)
    509519                                                                                .attr("width", x(values[values.length-1].axe_x)-x(values2[values2.length-1].axe_x)-20)
    510520                                                                                .attr("height", 35);
    511521                                                                        var text_rectangle = svg.select('.paths').append("text")
    512522                                                                                .attr("x",x(values[values.length-1].axe_x)-20)
    513                                                                                 .attr("y",410)
     523                                                                                .attr("y",(height+20))
    514524                                                                                .attr("class", "legende_perspective_text")
    515525                                                                                .style("text-anchor", "end")
     
    583593                                                                row.axe_x = parseFloat(row.axe_x).toFixed();
    584594                                                                origine = row.axe_y = parseFloat(row.axe_y.replace(',','.')).toFixed(2);
    585                                                                 if(row.axe_x <= naissance) values1.push(row);
    586                                                                 if(row.axe_x >= naissance) values2.push(row);
    587                                                                 if(row.axe_x == naissance) value_naissance = value_origine = row;
     595                                                                if(row.axe_x <= date_origine) values1.push(row);
     596                                                                if(row.axe_x >= date_origine) values2.push(row);
     597                                                                if(row.axe_x == date_origine) value_origine = value_actuelle = row;
    588598                                                                if(typeof(row.commentaire) == 'string' && row.commentaire.length > 1) values_commentaire.push(row);
    589599                                                        });
     
    591601                                                        xmin = values[0].axe_x;
    592602                                                        xmax = values[values.length-1].axe_x;
    593                                                         if(#ENV{donnees} == 1)
    594                                                                 ymax = parseFloat('4.89');
    595                                                         else
    596                                                                 ymax = 936;
    597603                                                               
    598604                                                        ymin = d3.min(values, function(d) { return parseFloat(d.axe_y); });
    599                                                         ymax = d3.max(values, function(d) { return parseFloat(d.axe_y); });
     605                                                        ymax = ymax_origine = d3.max(values, function(d) { return parseFloat(d.axe_y); });
    600606                                                       
    601607                                                        ymax = ymax + ((ymax-ymin)/3);
     608
    602609                                                        /**
    603610                                                         * Si naissance - 7 ans est dans la visu, on part de là
    604611                                                         */
    605                                                         if((naissance - 7) > xmin){
    606                                                                 origine = naissance -7;
    607                                                                 centre_origine = naissance + 4;
     612                                                        if((date_origine - 7) > xmin){
     613                                                                origine = date_origine -7;
     614                                                                var diff = 0;
    608615                                                        }
    609616                                                        /**
     
    613620                                                        else{
    614621                                                                origine = xmin;
    615                                                                 centre_origine = parseInt(xmin)+11;
    616                                                         }
    617 
     622                                                                var diff = 7-(date_origine - parseInt(xmin));
     623                                                        }
     624
     625                                                        real_width = (graph_width/22)*(xmax-xmin);
     626                                                        x.range([0, real_width]).domain([parseInt(xmin), parseInt(xmax)]);
     627                                                        y.domain([ymin, ymax]).nice();
     628                                                       
    618629                                                        // Utilisation de every pour couper lorsque l'on a trouvé
    619630                                                        values.every(function(row,i){
     
    624635                                                                return true;
    625636                                                        });
    626 
    627                                                         real_width = (graph_width/22)*(xmax-xmin);
    628                                                         x.range([0, real_width]).domain([parseInt(xmin), parseInt(xmax)]);
    629                                                         y.domain([ymin, ymax]).nice();
    630 
    631                                                         translate_defaut = x(d.axe_x);
    632 
     637                                                       
     638                                                        step = x(values2[1].axe_x)-x(values2[0].axe_x);
     639                                                       
     640                                                        translate_defaut = '-'+x(d.axe_x);
     641                                                        console.log(translate_defaut);
     642                                                        if(diff > 0)
     643                                                                translate_defaut = parseFloat(translate_defaut)+(diff*step);
     644                                                        console.log(translate_defaut);
    633645                                                        // Afficher le premier slide ou les infos de scroll
    634646                                                        var annee_debut =  values[0].axe_x;
    635                                                         if([(#ENV{naissance})] > values[0].axe_x && [(#ENV{donnees,1})] == 1){
    636                                                                 var degres = (parseFloat(value_naissance.axe_y) - parseFloat(values[0].axe_y)).toFixed(2);
     647                                                        if(naissance > values[0].axe_x && [(#ENV{donnees,1})] == 1){
     648                                                                var degres = (parseFloat(value_origine.axe_y) - parseFloat(values[0].axe_y)).toFixed(2);
    637649                                                                if(degres.charAt(0) == '-'){
    638650                                                                        degres = degres.replace('-','');
     
    641653                                                                        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>";
    642654                                                        }
    643                                                         else if([(#ENV{naissance})] > values[0].axe_x && [(#ENV{donnees,1})] == 2){
    644                                                                 var ppm = (parseFloat(values[values.length-1].axe_y) - parseFloat(value_naissance.axe_y)).toFixed(2);
     655                                                        else if(naissance > values[0].axe_x && [(#ENV{donnees,1})] == 2){
     656                                                                var ppm = (parseFloat(values[values.length-1].axe_y) - parseFloat(value_origine.axe_y)).toFixed(2);
    645657                                                                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>";
    646658                                                        }
     
    773785                                                        d3.selectAll(".apresnaissance,.avtnaissance,.axis,.birth-line,.today-line,.ligne_naissance,.texte_naissance,.circle_naissance,.infos_dots,.legende").remove();
    774786                                                        d3.select(".paths")
    775                                                                 .attr("transform", "translate(-"+translatex+", 0)")
     787                                                                .attr("transform", "translate("+translatex+", 0)")
    776788                                                       
    777789                                                        // On ajoute la ligne de données pour la période aprÚs naissance
     
    795807                                                                        .attr("dx", "1em")
    796808                                                                        .attr("transform", function(d) { return "rotate(-270)" });
     809                                                       
     810                                                        svg.select('.x.axis')
     811                                                                .datum( value_origine )
     812                                                                .append("line")
     813                                                                        .attr( 'class', 'axis_postnaissance' )
     814                                                                        .attr("x1", function( d ) { return x( d.axe_x ); })
     815                                                                        .attr("x2",function( d ) { return x( values[values.length-1].axe_x ); }) // vertical line so same value on each
     816                                                                        .attr("y1",0).attr("y1",0);
     817
    797818                                                        // Ajout d'une class 'tickold' sur les labels de l'axe X plus vieux que la naissance
    798819                                                        jQuery('.x .tick text').each(function(){
    799                                                                 if(parseInt(jQuery(this).text()) < value_naissance.axe_x)
    800                                                                         jQuery(this).parent('.tick').attr('class','tick tickold');
     820                                                                // On enlÚve tous les ticks > aujourd'hui sauf le dernier'
     821                                                                if(parseInt(jQuery(this).text()) > values2[values2.length-1].axe_x && parseInt(jQuery(this).text()) != values[values.length-1].axe_x){
     822                                                                        jQuery(this).remove();
     823                                                                }else{
     824                                                                        var classe = 'tick';
     825                                                                        if(parseInt(jQuery(this).text()) < value_origine.axe_x)
     826                                                                                classe = classe+' tickold';
     827                                                                        if(jQuery(this).text().charAt(3) == 0){
     828                                                                                classe = classe+' tick_important';
     829                                                                                jQuery(this).attr("dy",'-0.5em');
     830                                                                        }
     831                                                                        if(classe != 'tick')
     832                                                                                jQuery(this).parent('.tick').attr('class',classe);
     833                                                                }
    801834                                                        });
    802835                                                       
     836                                                        var rectangle = svg.append("rect")
     837                                                                                .attr("class","bloc_yaxis")
     838                                                                                .attr("x", graph_width-35)
     839                                                                                .attr("y", 0)
     840                                                                                .attr("fill","#ffffff")
     841                                                                                .attr("width", 35)
     842                                                                                .attr("height", graph_height);
     843
     844                                                        // Ajout de l'axe Y
     845                                                        var right = graph_width-35;
     846                                                        svg.append("g")
     847                                                                .attr("class", "y axis")
     848                                                                .attr("transform", "translate("+right+",0)")
     849                                                                .call(yAxis);
     850
     851                                                        // On enlÚve les ticks de l'axe y trop haut
     852                                                        jQuery('.y .tick text').each(function(){
     853                                                                if(parseFloat(jQuery(this).text()) > ymax_origine)
     854                                                                        jQuery(this).parent().remove();
     855                                                        });
     856
    803857                                                        // Ajout de la légende des axes
    804858                                                        svg.append("text")
    805                                                                 .attr("x",-5)
    806                                                                 .attr("y",445)
     859                                                                .attr("x",0)
     860                                                                .attr("y",height+60)
    807861                                                                .attr("class", "legende")
    808862                                                                .style("text-anchor", "start")
     
    842896                                                                                );
    843897                                                                        });
    844 
    845                                                         // Ajout du groupe qui contiendra les éléments de la date de naissance
    846                                                         ligne_naissance_groupe = svg.select('.paths').append("g")
    847                                                                 .attr("class", "birth-line");
     898                                                       
     899                                                        if(naissance > parseInt(values[0].axe_x)){
     900                                                                // Ajout du groupe qui contiendra les éléments de la date de naissance
     901                                                                ligne_naissance_groupe = svg.select('.paths').append("g")
     902                                                                        .attr("class", "birth-line");
     903               
     904                                                                // Ajout de la ligne de naissance
     905                                                                ligne_naissance = ligne_naissance_groupe
     906                                                                        .datum( value_origine )
     907                                                                        .append("line")
     908                                                                                .attr( 'class', 'ligne_naissance second_plan' )
     909                                                                                .attr("x1", function( d ) { return x( d.axe_x ); })
     910                                                                                .attr("x2",function( d ) { return x( d.axe_x ); }) // vertical line so same value on each
     911                                                                                .attr("y1",80).attr("y2", height);
    848912       
    849                                                         // Ajout de la ligne de naissance
    850                                                         ligne_naissance = ligne_naissance_groupe
    851                                                                 .datum( value_naissance )
    852                                                                 .append("line")
    853                                                                         .attr( 'class', 'ligne_naissance second_plan' )
    854                                                                         .attr("x1", function( d ) { return x( d.axe_x ); })
    855                                                                         .attr("x2",function( d ) { return x( d.axe_x ); }) // vertical line so same value on each
    856                                                                         .attr("y1",80).attr("y2", height);
    857 
    858                                                         [(#SET{image_naissance,[(#CHEMIN{images/naissance_[(#CSS_CLASS).png]}|balise_img)]})]
    859                                                         // Ajout de l'image de la bougie
    860                                                         ligne_naissance_groupe
    861                                                                 .datum(value_naissance)
    862                                                                 .append("svg:image")
    863                                                                         .attr("xlink:href", "[(#GET{image_naissance}|extraire_attribut{src})]")
    864                                                                         .attr("x", function(d){
    865                                                                                 return x(value_naissance.axe_x)-[(#GET{image_naissance}|extraire_attribut{width}|div{2})];
    866                                                                         })
    867                                                                         .attr("y", "2")
    868                                                                         .attr("width", "[(#GET{image_naissance}|extraire_attribut{width})]")
    869                                                                         .attr("height", "[(#GET{image_naissance}|extraire_attribut{height})]");
     913                                                                [(#SET{image_naissance,[(#CHEMIN{images/naissance_[(#CSS_CLASS).png]}|balise_img)]})]
     914                                                                // Ajout de l'image de la bougie
     915                                                                ligne_naissance_groupe
     916                                                                        .datum(value_origine)
     917                                                                        .append("svg:image")
     918                                                                                .attr("xlink:href", "[(#GET{image_naissance}|extraire_attribut{src})]")
     919                                                                                .attr("x", function(d){
     920                                                                                        return x(value_origine.axe_x)-[(#GET{image_naissance}|extraire_attribut{width}|div{2})];
     921                                                                                })
     922                                                                                .attr("y", "2")
     923                                                                                .attr("width", "[(#GET{image_naissance}|extraire_attribut{width})]")
     924                                                                                .attr("height", "[(#GET{image_naissance}|extraire_attribut{height})]");
     925                                                        }
    870926                                                       
    871927                                                        [(#SET{image_depart,[(#CHEMIN{images/depart_[(#CSS_CLASS).png]}|balise_img)]})]
     
    935991                                                         */
    936992                                                        ligne_interactive =  ligne_interactive_groupe
    937                                                                 .datum(value_origine)
     993                                                                .datum(value_actuelle)
    938994                                                                        .append("line")
    939995                                                                                .attr('class', 'ligne_interactive')
    940                                                                                 .attr("x1", function(d) { return x( d.axe_x )-translatex; })
    941                                                                                 .attr("x2",function(d) { return x(d.axe_x)-translatex;})
     996                                                                                .attr("x1", function(d) { return x( d.axe_x )+parseFloat(translatex); })
     997                                                                                .attr("x2",function(d) { return x(d.axe_x)+parseFloat(translatex);})
    942998                                                                                .attr("y1",100)
    943999                                                                                .attr("y2", height);
     
    9481004                                                                .attr('class','triangle')
    9491005                                                                .attr('d', function(d) {
    950                                                                         var x1 = (x( value_origine.axe_x )-translatex-14), x2 = x( value_origine.axe_x)-translatex+14,x3 = x( value_origine.axe_x )-translatex;
    951                                                                         var x4 = 'M '+ x1 +' 390 L '+x2+' 390 L '+x3+' 365 z';
     1006                                                                        var x1 = (x( value_actuelle.axe_x )+parseFloat(translatex)-14), x2 = x( value_actuelle.axe_x)+parseFloat(translatex)+14,x3 = x( value_actuelle.axe_x )+parseFloat(translatex);
     1007                                                                        var x4 = 'M '+ x1 +' '+height+' L '+x2+' '+height+' L '+x3+' '+(height-25)+' z';
    9521008                                                                        return x4;
    9531009                                                                });
Note: See TracChangeset for help on using the changeset viewer.