Changeset 7985


Ignore:
Timestamp:
12/20/13 12:54:30 (6 years ago)
Author:
kent1
Message:

Afficher la barre "Ajourd'hui"

Location:
plugins_spip/terraeco_infographie/trunk
Files:
2 edited

Legend:

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

    r7984 r7985  
    174174}
    175175
    176 .birth-line line,.interaction line{
     176.birth-line line,.today-line line,.interaction line{
    177177        stroke :#e4e4e4;
    178178        stroke-width: 1px;
    179179}
    180180
    181 .birth-line line{
     181.birth-line line,.today-line line{
    182182        stroke-dasharray:10 10;
    183183}
     184
    184185.interaction line.ligne_interactive{
    185186        stroke :#f29100;
     
    194195}
    195196
     197.circle_aujd_main{
     198        fill:#ffffff;
     199        stroke:#f29100;
     200        stroke-width: 8px;
     201}
     202
     203.circle_aujd_small{
     204        fill:#f29100;
     205}
     206.co2 .circle_aujd_main{
     207        stroke:#327f75;
     208}
     209
     210.co2 .circle_aujd_small{
     211        fill:#327f75;
     212}
    196213.co2 .circle_naissance{
    197214        fill:#327f75;
    198215}
    199 .texte_naissance{
     216.texte_naissance,.texte_aujd{
    200217        font-family: "Lato","Arial Narrow","Lucida Sans Unicode", "Lucida Grande", sans-serif;
    201218        fill:#f29100;
     
    205222}
    206223
    207 .co2 .texte_naissance{
     224.co2 .texte_naissance,.co2 .texte_aujd{
    208225        fill:#327f75;
    209226}
  • plugins_spip/terraeco_infographie/trunk/infographie.html

    r7984 r7985  
    271271                                                        d3.select(".paths")
    272272                                                                .attr("transform", "translate(-"+translatex+", 0)")
    273                                                         // On ajoute la ligne pour la période avant naissance
     273                                                       
     274                                                        // On ajoute la ligne de données pour la période aprÚs naissance
    274275                                                        svg.selectAll('.paths').append("path")
    275276                                                                .attr("class", "line apresnaissance")
    276277                                                                .attr("d", line(values2));
    277278       
    278                                                         // Add la ligne avant naissance.
     279                                                        // Ajout la ligne de données avant la naissance
    279280                                                        svg.selectAll('.paths').append("path")
    280281                                                                .attr("class", "line avtnaissance")
    281                                                                 //.attr("clip-path", "url(#clip)")
    282282                                                                .attr("d", line(values1));
    283283       
     
    294294                                                                                return "rotate(-270)"
    295295                                                                        });
    296                                                         svg.append("text")      // text label for the x axis
     296                                                        // Ajout d'une class 'tickold' sur les labels de l'axe X plus vieux que la naissance
     297                                                        $('.x .tick text').each(function(){
     298                                                                if(parseInt($(this).text()) < value_naissance.axe_x){
     299                                                                        $(this).parent('.tick').attr('class','tick tickold');
     300                                                                }
     301                                                        });
     302                                                       
     303                                                        // Ajout de la légende des axes
     304                                                        svg.append("text")
    297305                                                                .attr("x",-5)
    298306                                                                .attr("y",445)
     
    300308                                                                .style("text-anchor", "start")
    301309                                                                .text("#AXE_Y");
     310
     311                                                        // Ajout des points d'Anecdotes cliquables
     312                                                        // sera certainement à supprimer aprÚs debug
    302313                                                        d3.select("#"+containerid).select('.paths')
    303314                                                                .selectAll(".dot")
     
    329340                                                                        });
    330341
     342                                                        // Ajout du groupe qui contiendra les éléments de la date de naissance
    331343                                                        ligne_naissance_groupe = svg.select('.paths').append("g")
    332344                                                                .attr("class", "birth-line");
    333345       
    334                                                         // add the line to the group
     346                                                        // Ajout de la ligne de naissance
    335347                                                        ligne_naissance = ligne_naissance_groupe
    336348                                                                .datum( value_naissance )
    337349                                                                .append("line")
    338                                                                 .attr( 'class', 'ligne_naissance' )
    339                                                                 .attr("x1", function( d ) {
    340                                                                         return x( d.axe_x );
    341                                                                 }).attr("x2",function( d ) {
    342                                                                         return x( d.axe_x );
    343                                                                 }) // vertical line so same value on each
    344                                                                 .attr("y1",100).attr("y2", height);
    345        
    346                                                         ligne_naissance_groupe.datum(value_naissance)
     350                                                                        .attr( 'class', 'ligne_naissance' )
     351                                                                        .attr("x1", function( d ) {
     352                                                                                return x( d.axe_x );
     353                                                                        }).attr("x2",function( d ) {
     354                                                                                return x( d.axe_x );
     355                                                                        }) // vertical line so same value on each
     356                                                                        .attr("y1",100).attr("y2", height);
     357       
     358                                                        // Ajout du cercle en haut de la ligne de naissance
     359                                                        ligne_naissance_groupe
     360                                                                .datum(value_naissance)
    347361                                                                .append("circle")
    348                                                                 .attr('class','circle_naissance')
    349                                                                 .attr( 'r', 20 )
    350                                                                 .attr("cx", function( d ) {
    351                                                                         return x( d.axe_x );
    352                                                                 })
    353                                                                 .attr("cy",40);
    354 
    355                                                         ligne_naissance_groupe.append("text")
    356                                                                 .attr('class','texte_naissance')
    357                                                                 .text('VOTRE NAISSANCE')
    358                                                                 .attr("x", function(d){
    359                                                                         return x(d.axe_x);
    360                                                                 })
    361                                                                 .attr("y",80);
    362                                                        
    363                                                         var imgs = ligne_naissance_groupe.selectAll("img").data([0]);
    364                                                                 imgs.enter()
    365                                                                         .append("svg:image")
     362                                                                        .attr('class','circle_naissance')
     363                                                                        .attr( 'r', 20 )
     364                                                                        .attr("cx", function( d ) {
     365                                                                                return x( d.axe_x );
     366                                                                        })
     367                                                                        .attr("cy",40);
     368
     369                                                        // Ajout du texte "Votre naissance"
     370                                                        ligne_naissance_groupe
     371                                                                .datum(value_naissance)
     372                                                                .append("text")
     373                                                                        .attr('class','texte_naissance')
     374                                                                        .text('VOTRE NAISSANCE')
     375                                                                        .attr("x", function(d){
     376                                                                                return x(d.axe_x);
     377                                                                        })
     378                                                                        .attr("y",80);
     379                                                       
     380                                                        // Ajout de l'image de la bougie
     381                                                        ligne_naissance_groupe
     382                                                                .datum(value_naissance)
     383                                                                .append("svg:image")
    366384                                                                        .attr("xlink:href", "[(#CHEMIN{images/bougie.png}|timestamp)]")
    367385                                                                        .attr("x", function(d){
    368                                                                         return x(value_naissance.axe_x)-17;
    369                                                                 })
    370                                                                 .attr("y", "22")
    371                                                                 .attr("width", "35")
    372                                                                 .attr("height", "35");
    373                                                         $('.x .tick text').each(function(){
    374                                                                 if(parseInt($(this).text()) < value_naissance.axe_x){
    375                                                                         $(this).parent('.tick').attr('class','tick tickold');
    376                                                                 }
    377                                                         });
     386                                                                                return x(value_naissance.axe_x)-17;
     387                                                                        })
     388                                                                        .attr("y", "22")
     389                                                                        .attr("width", "35")
     390                                                                        .attr("height", "35");
     391                                                                       
     392                                                       
     393                                                        // Ajout du groupe pour Aujourd'hui
     394                                                        ligne_aujd_groupe = svg.select('.paths').append("g")
     395                                                                .attr("class", "today-line");
     396       
     397                                                        // Ajout de la ligne d'aujourd'hui
     398                                                        ligne_aujd = ligne_aujd_groupe
     399                                                                .datum(values[values.length-1])
     400                                                                .append("line")
     401                                                                        .attr( 'class', 'ligne_aujd' )
     402                                                                        .attr("x1", function( d ) {
     403                                                                                return x( d.axe_x );
     404                                                                        }).attr("x2",function( d ) {
     405                                                                                return x( d.axe_x );
     406                                                                        }) // vertical line so same value on each
     407                                                                        .attr("y1",100).attr("y2", height);
     408       
     409                                                        // Ajout du cercle en haut de la ligne de naissance
     410                                                        ligne_aujd_groupe
     411                                                                .datum(values[values.length-1])
     412                                                                .append("circle")
     413                                                                        .attr('class','circle_aujd_main')
     414                                                                        .attr( 'r', 15 )
     415                                                                        .attr("cx", function( d ) {
     416                                                                                return x( d.axe_x );
     417                                                                        })
     418                                                                        .attr("cy",40);
     419                                                       
     420                                                        // Ajout du cercle en haut de la ligne de naissance
     421                                                        ligne_aujd_groupe
     422                                                                .datum(values[values.length-1])
     423                                                                .append("circle")
     424                                                                        .attr('class','circle_aujd_small')
     425                                                                        .attr( 'r', 6 )
     426                                                                        .attr("cx", function( d ) {
     427                                                                                return x( d.axe_x );
     428                                                                        })
     429                                                                        .attr("cy",40);
     430                                                        // Ajout du texte "Aujourd'hui"
     431                                                        ligne_aujd_groupe
     432                                                                .datum(values[values.length-1])
     433                                                                .append("text")
     434                                                                        .attr('class','texte_aujd')
     435                                                                        .text("AUJOURD'HUI")
     436                                                                        .attr("x", function(d){
     437                                                                                return x(d.axe_x);
     438                                                                        })
     439                                                                        .attr("y",80);
     440                                                       
    378441                                                }
    379442
Note: See TracChangeset for help on using the changeset viewer.