Changeset 8004 for plugins_spip


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

Afficher la ligne de départ et optimisations

Location:
plugins_spip/terraeco_infographie/trunk
Files:
2 added
2 edited

Legend:

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

    r8002 r8004  
    202202}
    203203
    204 .birth-line line,.today-line line,.interaction line,.tomorrow-line line{
     204/**
     205 *      Les lignes .second_plan sont en pointillés et grises
     206 */
     207line.second_plan{
    205208        stroke :#e4e4e4;
    206209        stroke-width: 1px;
    207 }
    208 
    209 .birth-line line,.today-line line,.tomorrow-line line{
    210210        stroke-dasharray:10 10;
    211211}
    212212
    213 .interaction line.ligne_interactive{
     213line.ligne_interactive{
    214214        stroke :#f29100;
    215 }
    216 
    217 .co2 .interaction line.ligne_interactive{
     215        stroke-width: 1px;
     216}
     217
     218.co2 line.ligne_interactive{
    218219        stroke :#3E9B8B;
    219220}
    220221
    221 .circle_naissance{
    222         fill:#f29100;
    223 }
    224 
    225 .circle_aujd_main{
    226         fill:#ffffff;
    227         stroke:#f29100;
    228         stroke-width: 8px;
    229 }
    230 
    231 .circle_aujd_small{
    232         fill:#f29100;
    233 }
    234 .co2 .circle_aujd_main{
    235         stroke:#3E9B8B;
    236 }
    237 
    238 .co2 .circle_aujd_small{
    239         fill:#3E9B8B;
    240 }
    241 .co2 .circle_naissance{
    242         fill:#3E9B8B;
    243 }
    244 .texte_naissance,.texte_aujd{
    245         font-family: "Lato","Arial Narrow","Lucida Sans Unicode", "Lucida Grande", sans-serif;
    246         fill:#f29100;
    247         stroke:none;
    248         font-size:16px;
    249         text-anchor:middle;
    250 }
    251 
    252 .co2 .texte_naissance,.co2 .texte_aujd{
    253         fill:#3E9B8B;
    254 }
    255 
    256 .triangle{
    257         fill:#f29100;
    258 }
    259 
    260 .tick{
    261         fill:#f29100;
    262 }
    263 
    264 .co2 .tick{
    265         fill:#3E9B8B;
    266 }
    267 .co2 .tickold,.tickold{
    268         fill:#D9D9D9;
    269 }
    270 .co2 .triangle{
    271         fill:#3E9B8B;
    272 }
    273 
    274 .axis {
    275   shape-rendering: crispEdges;
    276 }
    277 
    278 .x.axis .tick line {
    279   stroke: #f29100;
    280   fill:#f29100;
    281 }
    282 
    283 .co2 .x.axis .tick line{
    284         stroke: #3E9B8B;
    285         fill:#3E9B8B;
    286 }
    287 
    288 .x.axis .tickold line, .co2 .x.axis .tickold line{
    289         stroke: #cccccc;
    290 }
    291 .x.axis text{
    292         font: 10px sans-serif;
    293 }
    294 
    295 .x.axis .minor {
    296   stroke-opacity: .5;
    297 }
    298 
    299 .x.axis path {
    300   display: none;
    301 }
    302 
    303 .y.axis line, .y.axis path {
    304   fill: none;
    305   stroke: #000;
    306   display:none;
    307 }
    308 .y.axis .tick{
    309         display:none;
    310 }
    311 
    312 .legende_perspective{
    313         fill:#F29100;
    314 }
    315 
    316 .co2 .legende_perspective{
    317         fill:#3E9B8B;
    318 }
    319 .legende,.legende_perspective_text{
    320         font-family: "Lato","Arial Narrow","Lucida Sans Unicode", "Lucida Grande", sans-serif;
    321         fill:#70706E;
    322         font-size:14px;
    323 }
    324 
    325 .legende_perspective_text{
    326         fill:#ffffff;
    327 }
     222/**
     223 *      Les cercles svg pointant les anecdotes
     224 */
    328225.infos_dots {
    329226        stroke:#D74B0B;
     
    333230}
    334231
     232.infos_dots.active{
     233        stroke-width:5px;
     234}
     235
    335236.co2 .infos_dots{
    336237        stroke:#3E9B8B;
     
    339240        stroke-width:5;
    340241}
     242
     243/**
     244 *      Le triangle en dessous de la ligne d'interaction
     245 */
     246.triangle{
     247        fill:#f29100;
     248}
     249
     250.co2 .triangle{
     251        fill:#3E9B8B;
     252}
     253
     254/**
     255 *      Les valeurs sur les axes "tick"
     256 */
     257
     258.tick{
     259        fill:#f29100;
     260}
     261
     262.co2 .tick{
     263        fill:#3E9B8B;
     264}
     265
     266.co2 .tickold,.tickold{
     267        fill:#D9D9D9;
     268}
     269
     270/**
     271 *      Les axes
     272 */
     273.axis {
     274  shape-rendering: crispEdges;
     275}
     276
     277.x.axis .tick line {
     278  stroke: #f29100;
     279  fill:#f29100;
     280}
     281
     282.co2 .x.axis .tick line{
     283        stroke: #3E9B8B;
     284        fill:#3E9B8B;
     285}
     286
     287.x.axis .tickold line, .co2 .x.axis .tickold line{
     288        stroke: #cccccc;
     289}
     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
     308/**
     309 *      Légende de la perspective (recouvrant les ticks)
     310 */
     311.legende_perspective{
     312        fill:#F29100;
     313}
     314
     315.co2 .legende_perspective{
     316        fill:#3E9B8B;
     317}
     318.legende,.legende_perspective_text{
     319        font-family: "Lato","Arial Narrow","Lucida Sans Unicode", "Lucida Grande", sans-serif;
     320        fill:#70706E;
     321        font-size:14px;
     322}
     323
     324.legende_perspective_text{
     325        fill:#ffffff;
     326}
     327
     328/**
     329 *      Les tooltips
     330 */
    341331div.tooltip {
    342332        background:transparent url(img/tooltip_temp.png) no-repeat right center;
     
    359349}
    360350
    361 .infos_dots.active{
    362         stroke-width:5px;
    363 }
     351/**
     352 *      L'infobox
     353 */
    364354
    365355.infobox{
     
    375365
    376366.infobox .annee{font-size:1.5em;}
     367
    377368.infobox p{margin-top:0;}
     369
    378370.infobox .logo{
    379371        float:left;
     
    389381}
    390382
    391 
    392383.infobox .contenu_fin{
    393384        width: 100%;
     
    414405}
    415406
     407/**
     408 *      Les flÚches d'intéraction en bas
     409 */
    416410.arrows_nav{
    417411        text-align:center;
     
    441435}
    442436
     437/**
     438 *      Le petit logo terraeco en bas de page
     439 */
    443440.logo_terraeco{
    444441        position:absolute;
  • plugins_spip/terraeco_infographie/trunk/infographie.html

    r8003 r8004  
    367367                                                                                .attr("class", "line perspective perspective1_mediane")
    368368                                                                                .attr("d", line(values_perspective1_mediane));
    369                                                                         // Si on a donné une fonction comme callback => on l'exécute
     369                                                                       
     370                                                                        [(#SET{image_demain,[(#CHEMIN{images/demain_[(#CSS_CLASS).png]}|balise_img)]})]
    370371                                                                        // Ajout du groupe pour Aujourd'hui
    371372                                                                        ligne_demain_groupe = svg.select('.paths').append("g").attr("class", "tomorrow-line");
     
    375376                                                                                .datum(values[values.length-1])
    376377                                                                                .append("line")
    377                                                                                         .attr( 'class', 'ligne_demain' )
     378                                                                                        .attr( 'class', 'ligne_demain second_plan' )
    378379                                                                                        .attr("x1", function( d ) { return x( d.axe_x ); })
    379380                                                                                        .attr("x2",function( d ) { return x( d.axe_x ); })
    380                                                                                         .attr("y1",80).attr("y2", height);
    381                
    382                                                                         [(#SET{image_demain,[(#CHEMIN{images/demain_[(#CSS_CLASS).png]}|balise_img)]})]
     381                                                                                        .attr("y1",[(#GET{image_demain}|extraire_attribut{height}|plus{10})]).attr("y2", height);
     382
    383383                                                                        // Ajout de l'image de la bougie
    384384                                                                        ligne_demain_groupe
     
    410410                                                                                        });
    411411                                                                                });
    412 
     412                                                                       
     413                                                                        // Si on a donné une fonction comme callback => on l'exécute
    413414                                                                        if(typeof(callback) == 'function') callback();
    414415                                                                });
     
    850851                                                                .datum( value_naissance )
    851852                                                                .append("line")
    852                                                                         .attr( 'class', 'ligne_naissance' )
     853                                                                        .attr( 'class', 'ligne_naissance second_plan' )
    853854                                                                        .attr("x1", function( d ) { return x( d.axe_x ); })
    854855                                                                        .attr("x2",function( d ) { return x( d.axe_x ); }) // vertical line so same value on each
     
    867868                                                                        .attr("width", "[(#GET{image_naissance}|extraire_attribut{width})]")
    868869                                                                        .attr("height", "[(#GET{image_naissance}|extraire_attribut{height})]");
    869                                                                        
    870                                                        
     870                                                       
     871                                                        [(#SET{image_depart,[(#CHEMIN{images/depart_[(#CSS_CLASS).png]}|balise_img)]})]
     872                                                        // Ajout du groupe pour le depart
     873                                                        ligne_depart_groupe = svg.select('.paths').append("g").attr("class", "start-line");
     874       
     875                                                        // Ajout de la ligne de depart
     876                                                        ligne_depart_aujd = ligne_depart_groupe
     877                                                                .datum(values[0])
     878                                                                .append("line")
     879                                                                        .attr("class","ligne_depart second_plan")
     880                                                                        .attr("x1", function( d ) { return x( d.axe_x ); })
     881                                                                        .attr("x2",function( d ) { return x( d.axe_x ); })
     882                                                                        .attr("y1",[(#GET{image_depart}|extraire_attribut{height}|plus{10})]).attr("y2", height);
     883
     884                                                        // Ajout de l'image de depart
     885                                                        ligne_depart_groupe
     886                                                                .datum(values[0])
     887                                                                .append("svg:image")
     888                                                                        .attr("xlink:href", "[(#GET{image_depart}|extraire_attribut{src})]")
     889                                                                        .attr("x", function(d){
     890                                                                                return x(d.axe_x)-[(#GET{image_depart}|extraire_attribut{width}|div{2})];
     891                                                                        })
     892                                                                        .attr("y", "2")
     893                                                                        .attr("width", "[(#GET{image_depart}|extraire_attribut{width})]")
     894                                                                        .attr("height", "[(#GET{image_depart}|extraire_attribut{height})]");
     895       
     896                                                        [(#SET{image_aujd,[(#CHEMIN{images/aujourdhui_[(#CSS_CLASS).png]}|balise_img)]})]
    871897                                                        // Ajout du groupe pour Aujourd'hui
    872898                                                        ligne_aujd_groupe = svg.select('.paths').append("g").attr("class", "today-line");
     
    876902                                                                .datum(values2[values2.length-1])
    877903                                                                .append("line")
    878                                                                         .attr( 'class', 'ligne_aujd' )
    879                                                                         .attr("x1", function( d ) { return x( d.axe_x ); })
    880                                                                         .attr("x2",function( d ) { return x( d.axe_x ); })
    881                                                                         .attr("y1",80).attr("y2", height);
    882 
    883                                                         [(#SET{image_aujd,[(#CHEMIN{images/aujourdhui_[(#CSS_CLASS).png]}|balise_img)]})]
     904                                                                        .attr("class","ligne_aujd second_plan")
     905                                                                        .attr("x1", function( d ) { return x(d.axe_x);})
     906                                                                        .attr("x2",function( d ) { return x(d.axe_x); })
     907                                                                        .attr("y1",[(#GET{image_aujd}|extraire_attribut{height}|plus{10})]).attr("y2", height);
     908
    884909                                                        // Ajout de l'image de la bougie
    885910                                                        ligne_aujd_groupe
Note: See TracChangeset for help on using the changeset viewer.