Changeset 8036


Ignore:
Timestamp:
01/03/14 13:20:25 (6 years ago)
Author:
kent1
Message:

On regroupe les éléments des images dans des objets

Différentes améliorations du js et du html

Location:
plugins_spip/terraeco_infographie/trunk
Files:
2 edited

Legend:

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

    r8025 r8036  
    1515<link href='http://fonts.googleapis.com/css?family=Lato:300,700' rel='stylesheet' type='text/css'>
    1616[<link rel="stylesheet" href="(#CHEMIN{css/infographie.css}|direction_css)" type="text/css" />]
     17<style type="text/css">
     18        path.area.perspective1_haute,path.area.perspective2_haute{
     19                fill: url( #gradient_perspective1 );
     20        }
     21</style>
    1722[<script type="application/javascript" src="(#CHEMIN{javascript/d3.min.js})"></script>]
    1823#INSERT_HEAD
    1924[<script type="text/javascript" src="(#CHEMIN{javascript/jquery.mousewheel.js})"></script>]
    2025<BOUCLE_donnees(INFOGRAPHIES_DATAS){id_infographies_data=#ENV{donnees}}>
    21 <script type="text/javascript" src="[(#URL_PAGE{infographie_lang.js}|parametre_url{id_infographies_data,#ENV{donnees}})]"></script>
     26[<script type="text/javascript" src="(#PRODUIRE{fond=infographie_lang.js,id_infographies_data=#ENV{donnees},lang=#ENV{lang}})"></script>]
    2227<script type="text/javascript">
    23         var containerid='graph1',infobox_class='infobox',
    24                 jeu_donnees = #ENV{donnees,1};
    25        
    26         var draw_perspectives_2_fichiers = ['#CHEMIN{csv/perspective_co2_rcp85_original.csv}','#CHEMIN{csv/perspective_co2_rcp3_original.csv}'],
    27                 draw_perspectives_1_fichiers = ['#CHEMIN{csv/perspective_temp_rcp85_original.csv}','#CHEMIN{csv/perspective_temp_rcp26_original.csv}'];
    28         [(#SET{image_demain,[(#CHEMIN{images/demain_[(#CSS_CLASS).png]}|balise_img)]})]
    29         [(#SET{image_naissance,[(#CHEMIN{images/naissance_[(#CSS_CLASS).png]}|balise_img)]})]
    30         [(#SET{image_depart,[(#CHEMIN{images/depart_[(#CSS_CLASS).png]}|balise_img)]})]
    31         [(#SET{image_aujd,[(#CHEMIN{images/aujourdhui_[(#CSS_CLASS).png]}|balise_img)]})]
    32         var image_demain = "[(#GET{image_demain}|extraire_attribut{src})]",
    33                 image_demain_width = [(#GET{image_demain}|extraire_attribut{width})],
    34                 image_demain_height = [(#GET{image_demain}|extraire_attribut{height})],
    35                 image_naissance = "[(#GET{image_naissance}|extraire_attribut{src})]",
    36                 image_naissance_width = [(#GET{image_naissance}|extraire_attribut{width})],
    37                 image_naissance_height = [(#GET{image_naissance}|extraire_attribut{height})],
    38                 image_depart = "[(#GET{image_depart}|extraire_attribut{src})]",
    39                 image_depart_width = [(#GET{image_depart}|extraire_attribut{width})],
    40                 image_depart_height = [(#GET{image_depart}|extraire_attribut{height})],
    41                 image_aujd = "[(#GET{image_aujd}|extraire_attribut{src})]",
    42                 image_aujd_width = [(#GET{image_aujd}|extraire_attribut{width})],
    43                 image_aujd_height = [(#GET{image_aujd}|extraire_attribut{height})];
    44                
    45         var date_origine = date_actuelle = [(#ENV{naissance,#GET{naissance_min}}|<{#GET{naissance_min}}|?{#GET{naissance_min},#ENV{naissance}}|intval)],
     28[(#SET{image_demain,[(#CHEMIN{images/demain_[(#CSS_CLASS)_[(#ENV{lang})].png]}|sinon{[(#CHEMIN{images/demain_[(#CSS_CLASS).png]})]}|balise_img)]})][
     29(#SET{image_naissance,[(#CHEMIN{images/naissance_[(#CSS_CLASS)_[(#ENV{lang})].png]}|sinon{[(#CHEMIN{images/naissance_[(#CSS_CLASS).png]})]}|balise_img)]})][
     30(#SET{image_depart,[(#CHEMIN{images/depart_[(#CSS_CLASS).png]}|balise_img)]})][
     31(#SET{image_aujd,[(#CHEMIN{images/aujourdhui_[(#CSS_CLASS)_[(#ENV{lang})].png]}|sinon{[(#CHEMIN{images/aujourdhui_[(#CSS_CLASS).png]})]}|balise_img)]})
     32]       var container_id='graph1',infobox_class='infobox',jeu_donnees = #ENV{donnees,1},
     33                draw_perspectives_1_fichiers = ['#CHEMIN{csv/perspective_temp_rcp85_original.csv}','#CHEMIN{csv/perspective_temp_rcp26_original.csv}'],
     34                draw_perspectives_2_fichiers = ['#CHEMIN{csv/perspective_co2_rcp85_original.csv}','#CHEMIN{csv/perspective_co2_rcp3_original.csv}'],
     35                image_demain = {url:"[(#GET{image_demain}|extraire_attribut{src})]",width:[(#GET{image_demain}|extraire_attribut{width})],height:[(#GET{image_demain}|extraire_attribut{height})]},
     36                image_naissance = {url:"[(#GET{image_naissance}|extraire_attribut{src})]",width:[(#GET{image_naissance}|extraire_attribut{width})],height:[(#GET{image_naissance}|extraire_attribut{height})]},
     37                image_depart = {url:"[(#GET{image_depart}|extraire_attribut{src})]",width:[(#GET{image_depart}|extraire_attribut{width})],height:[(#GET{image_depart}|extraire_attribut{height})]},
     38                image_aujd = {url:"[(#GET{image_aujd}|extraire_attribut{src})]",width:[(#GET{image_aujd}|extraire_attribut{width})],height:[(#GET{image_aujd}|extraire_attribut{height})]},
     39                date_origine = date_actuelle = [(#ENV{naissance,#GET{naissance_min}}|<{#GET{naissance_min}}|?{#GET{naissance_min},#ENV{naissance}}|intval)],
    4640                date_naissance = [(#ENV{naissance}|intval)],
    4741                date_aujourdhui = [(#ENV{date}|annee)];
     
    5650        });
    5751</script>
    58 <style type="text/css">
    59         path.area.perspective1_haute,path.area.perspective2_haute{
    60                 fill: url( #gradient_perspective1 );
    61         }
    62 </style>
    6352</head>
    6453
     
    9483                        </BOUCLE_si_pas_naissance>
    9584                        </B_si_pas_naissance>
    96                                 <BOUCLE_si_naissance_1951(CONDITION){si#ENV{naissance}|<{1951}|et{#ENV{donnees}|ou{#ENV{avt_naissance}}|non}|oui}>
    97                                 <div class="formulaire_spip">
    98                                         <form  action="[(#SELF)]" method="get">
    99                                                 [(#SELF|form_hidden)]
    100                                                 <input type="hidden" name="avt_naissance" value="oui" />
    101                                                 <div class="champ">#SET{nb,#ENV{naissance}|moins{1951}|replace{'-',''}}
    102                                                 [<p>(#GET{nb}|singulier_ou_pluriel{terraeco:texte_1951_singulier,terraeco:texte_1951})</p>]
    103                                                 </div>
    104                                                 <div class="boutons">
    105                                                         <input type="submit" class="submit" id="submit" value="OK" />
    106                                                 </div>
    107                                         </form>
     85                        <BOUCLE_si_naissance_1951(CONDITION){si#ENV{naissance}|<{1951}|et{#ENV{donnees}|ou{#ENV{avt_naissance}}|non}|oui}>
     86                        <div class="formulaire_spip">
     87                                <form  action="[(#SELF)]" method="get">
     88                                        [(#SELF|form_hidden)]
     89                                        <input type="hidden" name="avt_naissance" value="oui" />
     90                                        <div class="champ">#SET{nb,#ENV{naissance}|moins{1951}|replace{'-',''}}
     91                                        [<p>(#GET{nb}|singulier_ou_pluriel{terraeco:texte_1951_singulier,terraeco:texte_1951})</p>]
     92                                        </div>
     93                                        <div class="boutons">
     94                                                <input type="submit" class="submit" id="submit" value="OK" />
     95                                        </div>
     96                                </form>
     97                        </div>
     98                        </BOUCLE_si_naissance_1951>
     99                        </B_si_naissance_1951>
     100                        <BOUCLE_jeu_selectionne(INFOGRAPHIES_DATAS){id_infographies_data=#ENV{donnees}}>
     101                        <div class="infographie[ (#CSS_CLASS)]">
     102                                <div class="description_donnees">
     103                                        [<h3 class="#EDIT{titre}">(#TITRE)</h3>][
     104                                        <div class="texte[ (#EDIT{texte})]">
     105                                                (#TEXTE)
     106                                        </div>][
     107                                        <div class="credits[ (#EDIT{credits})]">
     108                                                (#CREDITS)
     109                                        </div>]
    108110                                </div>
    109                                 </BOUCLE_si_naissance_1951>
    110                                 </B_si_naissance_1951>
    111                                 <BOUCLE_jeu_selectionne(INFOGRAPHIES_DATAS){id_infographies_data=#ENV{donnees}}>
    112                                 <div class="infographie[ (#CSS_CLASS)]">
    113                                         <div class="description_donnees">
    114                                                 [<h3 class="#EDIT{titre}">(#TITRE)</h3>]
    115                                                 [<div class="texte #EDIT{texte}">
    116                                                 (#TEXTE)
    117                                                 </div>]
    118                                                 [<div class="credits #EDIT{credits}">
    119                                                 (#CREDITS)
    120                                                 </div>]
    121                                         </div>
    122                                         <B_infographies_logo>
    123                                         <div class="infographies_logo">
    124                                         <BOUCLE_infographies_logo(INFOGRAPHIES_DATAS spip_infographies_datas_liens){objet=infographie}{id_objet=#ID_INFOGRAPHIE}>
    125                                         [(#ID_INFOGRAPHIES_DATA|=={#ENV{donnees}}|non)
    126                                         <a href="[(#SELF|parametre_url{donnees,#ID_INFOGRAPHIES_DATA})]">[(#LOGO_INFOGRAPHIES_DATA|image_reduire{100,100})]</a>]
    127                                         [(#ID_INFOGRAPHIES_DATA|=={#ENV{donnees}}|oui)
    128                                         <strong class="on">[(#LOGO_INFOGRAPHIES_DATA_SURVOL|image_reduire{100,100})]</strong>]
    129                                         </BOUCLE_infographies_logo>
    130                                         </div>
    131                                         </B_infographies_logo>
    132                                         <BOUCLE_naissance_min(INFOGRAPHIES_DONNEES){id_infographies_data}{par axe_x}{0,1}>
    133                                         #SET{naissance_min,#AXE_X}
    134                                         </BOUCLE_naissance_min>
    135                                         <div id="graph1" class="aGraph" style="position:relative;width:100%;height:500px"></div>
    136                                         <script type="text/javascript">
    137                                                 jQuery(document).ready(function(){
    138                                                         climat_load_datas("[(#URL_PAGE{infographies_data}|parametre_url{id_infographies_data,#ID_INFOGRAPHIES_DATA,'&'})]");
    139                                                 });
    140                                         </script>
     111                                <B_infographies_logo>
     112                                <div class="infographies_logo">
     113                                <BOUCLE_infographies_logo(INFOGRAPHIES_DATAS spip_infographies_datas_liens){objet=infographie}{id_objet=#ID_INFOGRAPHIE}>
     114                                <a href="[(#SELF|parametre_url{donnees,#ID_INFOGRAPHIES_DATA})]" title="[(#TITRE|attribut_html)]"[(#ID_INFOGRAPHIES_DATA|=={#ENV{donnees}}|oui)class="on"]>[(#ID_INFOGRAPHIES_DATA|=={#ENV{donnees}}|?{[(#LOGO_INFOGRAPHIES_DATA_SURVOL|image_reduire{100,100})],[(#LOGO_INFOGRAPHIES_DATA|image_reduire{100,100})]})</a>]
     115                                </BOUCLE_infographies_logo>
    141116                                </div>
    142                                 [<div class="logo_terraeco">
    143                                         <a href="http://www.terraeco.net" class="spip_out" target="_blank">(#CHEMIN{images/logo_terraeco_normal.jpg}|image_reduire{100,20})</a>
    144                                 </div>]
    145                                 </BOUCLE_jeu_selectionne>
    146                                 </B_jeu_selectionne>
    147                                 <B_jeux>
    148                                 <div class="texte">#TEXTE</div>
    149                                 <div class="liste_infographies">
    150                                 <BOUCLE_jeux(INFOGRAPHIES_DATAS spip_infographies_datas_liens){objet=infographie}{id_objet=#ID_INFOGRAPHIE}>
    151                                 <a href="[(#SELF|parametre_url{donnees,#ID_INFOGRAPHIES_DATA})]">[(#LOGO_INFOGRAPHIES_DATA|image_reduire{250,250})]</a>
    152                                 </BOUCLE_jeux>
    153                                 </div>
    154                                 </B_jeux>
    155                                 <//B_jeu_selectionne>
    156                                 <//B_si_naissance_1951>
     117                                </B_infographies_logo>
     118                                <BOUCLE_naissance_min(INFOGRAPHIES_DONNEES){id_infographies_data}{par axe_x}{0,1}>
     119                                #SET{naissance_min,#AXE_X}
     120                                </BOUCLE_naissance_min>
     121                                <div id="graph1" class="aGraph" style="position:relative;width:100%;height:500px"></div>
     122                                <script type="text/javascript">
     123                                        jQuery(document).ready(function(){
     124                                                climat_load_datas("[(#URL_PAGE{infographies_data}|parametre_url{id_infographies_data,#ID_INFOGRAPHIES_DATA,'&'}|parametre_url{lang,#ENV{lang},&})]");
     125                                        });
     126                                </script>
     127                        </div>
     128                        [<div class="logo_terraeco">
     129                                <a href="http://www.terraeco.net" class="spip_out" target="_blank">(#CHEMIN{images/logo_terraeco_normal.jpg}|image_reduire{100,20})</a>
     130                        </div>]
     131                        </BOUCLE_jeu_selectionne>
     132                        </B_jeu_selectionne>
     133                        <B_jeux>
     134                        <div class="texte">#TEXTE</div>
     135                        <div class="liste_infographies">
     136                        <BOUCLE_jeux(INFOGRAPHIES_DATAS spip_infographies_datas_liens){objet=infographie}{id_objet=#ID_INFOGRAPHIE}>
     137                        <a href="[(#SELF|parametre_url{donnees,#ID_INFOGRAPHIES_DATA})]">[(#LOGO_INFOGRAPHIES_DATA|image_reduire{250,250})]</a>
     138                        </BOUCLE_jeux>
     139                        </div>
     140                        </B_jeux>
     141                        <//B_jeu_selectionne>
     142                        <//B_si_naissance_1951>
    157143                        <//B_si_pas_naissance>
    158144                </div>
  • plugins_spip/terraeco_infographie/trunk/javascript/infographie.js

    r8025 r8036  
    55        margin = {top: 0, right: 60, bottom: 60, left: 0},
    66        graph_width = graph_height = height = ymax = ymax_origine = translate_defaut = step = 0,
    7         vitesse = 200,
     7        vitesse = vitesse_origine = 200,
    88        svg = paths = infobox = tip = tip_perspective = moving = move_again = callback_infobox_close = progress_mousedown = perspective_ok = infobox_fermer = infobox_open = false;
    99
     
    2020
    2121function climat_load_datas(file){
    22         graph_width = jQuery('#'+containerid).width();
    23         graph_height = jQuery('#'+containerid).height();
     22        graph_width = jQuery('#'+container_id).width();
     23        graph_height = jQuery('#'+container_id).height();
    2424        height = graph_height - margin.top - margin.bottom - 60;
    2525       
    26         x= d3.scale.linear();
     26        x = d3.scale.linear();
    2727        y = d3.scale.linear().range([height, 0]);
    2828        xAxis = d3.svg.axis().scale(x).ticks(50).tickFormat(d3.format(".0f")).orient("bottom");
    29         yAxis = d3.svg.axis().scale(y).ticks(10).tickFormat(d3.format(".2f")).orient("right");
     29        if(jeu_donnees == 1)
     30                yAxis = d3.svg.axis().scale(y).ticks(10).tickFormat(d3.format(".2f")).orient("right");
     31        else
     32                yAxis = d3.svg.axis().scale(y).ticks(10).tickFormat(d3.format(".0f")).orient("right");
    3033       
    3134        // Add an SVG element with the desired dimensions and margin.
    32         svg = d3.select("#"+containerid).append("svg")
     35        svg = d3.select("#"+container_id).append("svg")
    3336                .attr("width", graph_width )
    3437                .attr("height", height + margin.top + margin.bottom)
     
    5558       
    5659        // Ajouter le tooltip que l'on cache automatiquement
    57         tip = d3.select('#'+containerid).append("div")
     60        tip = d3.select('#'+container_id).append("div")
    5861                .attr("class","tooltip tooltip_normal")
    5962                .style("display",'none');
    6063       
    61         tip_perspective = d3.select('#'+containerid).append("div")
     64        tip_perspective = d3.select('#'+container_id).append("div")
    6265                .attr("class","tooltip tooltip_perspective")
    6366                .style("display",'none');
    6467       
    6568        // Ajout de l'infobox'
    66         infobox = d3.select('#'+containerid).append("div")
     69        infobox = d3.select('#'+container_id).append("div")
    6770                        .attr("class",infobox_class)
    6871                        .style("display",'none');
     
    7174
    7275        // Ajouter les flÚches pour avancer et reculer
    73         arrow_nav = d3.select('#'+containerid).append("div").attr("class","arrows_nav")
     76        arrow_nav = d3.select('#'+container_id).append("div").attr("class","arrows_nav")
    7477                .html('<div class="left"></div><div class="right"></div>');
    7578       
     
    7982        d3.json(file, function(error, data) {
    8083                values = data;
    81                 var origine = 0;
    8284
    8385                values.forEach(function(row, i){
    8486                        row.axe_x = parseFloat(row.axe_x).toFixed();
    85                         origine = row.axe_y = parseFloat(row.axe_y.replace(',','.')).toFixed(2);
     87                        row.axe_y = parseFloat(row.axe_y.replace(',','.')).toFixed(2);
    8688                        if(row.axe_x <= date_origine) values1.push(row);
    8789                        if(row.axe_x >= date_origine) values2.push(row);
     
    9092                });
    9193
    92                 xmin = values[0].axe_x;
    93                 xmax = values[values.length-1].axe_x;
     94                xmin = parseInt(values[0].axe_x);
     95                xmax = parseInt(values[values.length-1].axe_x);
    9496                       
    9597                ymin = d3.min(values, function(d) { return parseFloat(d.axe_y); });
     
    98100                ymax = ymax + ((ymax-ymin)/3);
    99101
     102                if(date_naissance < xmin){
     103                        date_origine = xmin;
     104                        value_actuelle = value_origine = values[0];
     105                }
     106               
    100107                /**
    101108                 * Le centre sera toujours la valeur minimale + 11 ans
    102109                 * et le point d'origine la valeur min
    103110                 */
    104                 origine = xmin;
     111                var origine = xmin;
    105112                var diff = 7-(date_origine - parseInt(xmin));
    106113               
     
    110117                if((date_origine - 7) > xmin){
    111118                        origine = date_origine -7;
    112                         var diff = 0;
     119                        diff = 0;
    113120                }
    114121
     
    151158               
    152159                date_aujourdhui = parseInt(values[values.length-1].axe_x);
    153                 draw(translate_defaut);
    154                 drawlines_interaction(translate_defaut);
     160                climat_draw(translate_defaut);
     161                climat_drawlines_interaction(translate_defaut);
    155162                infographie_interactions();
    156163               
     
    188195                });
    189196               
     197                var xdata_height = d3.select('.x.axis').node().getBBox().height;
    190198                // On la replace en hauteur
    191                 var margin_top = (jQuery('#'+containerid+' svg').outerHeight()-jQuery('.legende').height()-35-jQuery('.'+infobox_class).outerHeight())/2;
     199                var margin_top = (jQuery('#'+container_id+' svg').outerHeight()-jQuery('.legende').height()-xdata_height-jQuery('.'+infobox_class).outerHeight())/2;
    192200                jQuery('.'+infobox_class).css({'margin-top':margin_top});
    193201               
     
    239247        var tooltip_top = y(d.axe_y) - (jQuery('.tooltip_normal').outerHeight()/2);
    240248        if(date_actuelle <= date_aujourdhui){
     249                vitesse = vitesse_origine;
    241250                var left = x(value_origine.axe_x)+parseFloat(translate_defaut)-jQuery('.tooltip_normal').outerWidth();
    242251                if(jQuery('.tooltip_normal').is(':hidden'))
     
    291300                                                function(){
    292301                                                                callback_infobox_close = function(){
    293                                                                         jQuery('#'+containerid).fadeOut(1000,function(){
     302                                                                        callback_infobox_close = false;
     303                                                                        jQuery('#'+container_id).fadeOut(1000,function(){
    294304                                                                                jQuery('.tooltip_normal').hide();
    295                                                                                 var callback = jQuery('#'+containerid).fadeIn(1000);
     305                                                                                var callback = jQuery('#'+container_id).fadeIn(1000);
    296306                                                                                if(jeu_donnees == 1)
    297                                                                                         draw_perspectives_1(callback);
     307                                                                                        climat_draw_perspectives_1(callback);
    298308                                                                                else
    299                                                                                         draw_perspectives_2(callback);
    300                                                                                 callback_infobox_close = false;
     309                                                                                        climat_draw_perspectives_2(callback);
    301310                                                                        });
    302311                                                                }
     
    307316                }
    308317        }else{
     318                vitesse = (vitesse_origine/3);
    309319                var translate_interactivite = ((date_actuelle-date_aujourdhui)*step);
    310320                /**
     
    338348 * Fonction de création des objets du diagramme
    339349 */
    340 function draw(translatex){
     350function climat_draw(translatex){
    341351        d3.selectAll(".apresnaissance,.avtnaissance,.axis,.birth-line,.today-line,.ligne_naissance,.texte_naissance,.circle_naissance,.infos_dots,.legende,.start-line,.bloc_yaxis").remove();
    342352        d3.select(".paths")
     
    391401        var rectangle = svg.append("rect")
    392402                                .attr("class","bloc_yaxis")
    393                                 .attr("x", graph_width-35)
    394403                                .attr("fill","#ffffff")
    395                                 .attr("width", 35)
    396404                                .attr("height", graph_height);
    397405
    398406        // Ajout de l'axe Y
    399         var right = graph_width-35;
     407       
    400408        svg.append("g")
    401409                .attr("class", "y axis")
    402                 .attr("transform", "translate("+right+",0)")
    403410                .call(yAxis);
    404411
     
    408415                        jQuery(this).parent().remove();
    409416        });
     417       
     418        var width_ydata = d3.select('.y.axis').node().getBBox().width;
     419        var right = graph_width-width_ydata;
     420        d3.select('.y.axis').attr("transform", "translate("+right+",0)");
     421        d3.select('.bloc_yaxis').attr("x", right).attr("width", width_ydata);
    410422
    411423        // Ajout de la légende des axes
    412424        svg.append("text")
    413                 .attr("y",height+60)
     425                .attr("y",height+55)
    414426                .attr("class", "legende")
    415427                .style("text-anchor", "start")
     
    418430        // Ajout des points d'Anecdotes cliquables
    419431        // sera certainement à supprimer aprÚs debug
    420         d3.select("#"+containerid).select('.paths')
     432        d3.select("#"+container_id).select('.paths')
    421433                .selectAll(".dot")
    422434                .data(values_commentaire)
     
    454466                                .attr("x1", function( d ) { return x( d.axe_x ); })
    455467                                .attr("x2",function( d ) { return x( d.axe_x ); }) // vertical line so same value on each
    456                                 .attr("y1",image_naissance_height+10).attr("y2", height);
     468                                .attr("y1",image_naissance.height+10).attr("y2", height);
    457469
    458470                // Ajout de l'image de la bougie
     
    460472                        .datum(value_origine)
    461473                        .append("svg:image")
    462                                 .attr("xlink:href", image_naissance)
    463                                 .attr("x", function(d){return x(value_origine.axe_x)-(image_naissance_width/2);})
    464                                 .attr("width", image_naissance_width)
    465                                 .attr("height", image_naissance_height);
     474                                .attr("xlink:href", image_naissance.url)
     475                                .attr("x", function(d){return x(value_origine.axe_x)-(image_naissance.width/2);})
     476                                .attr("width", image_naissance.width)
     477                                .attr("height", image_naissance.height);
    466478        }
    467479       
     
    476488                        .attr("x1", function(d){ return x(d.axe_x); })
    477489                        .attr("x2",function(d){ return x(d.axe_x); })
    478                         .attr("y1",image_depart_height+10).attr("y2", height);
     490                        .attr("y1",image_depart.height+10).attr("y2", height);
    479491
    480492        // Ajout de l'image de depart
     
    482494                .datum(values[0])
    483495                .append("svg:image")
    484                         .attr("xlink:href", image_depart)
    485                         .attr("x", function(d){ return x(d.axe_x)-(image_depart_width/2);})
    486                         .attr("width", image_depart_width)
    487                         .attr("height", image_depart_height);
     496                        .attr("xlink:href", image_depart.url)
     497                        .attr("x", function(d){ return x(d.axe_x)-(image_depart.width/2);})
     498                        .attr("width", image_depart.width)
     499                        .attr("height", image_depart.height);
    488500
    489501        // Ajout du groupe pour Aujourd'hui
     
    497509                        .attr("x1", function(d){ return x(d.axe_x);})
    498510                        .attr("x2",function(d){ return x(d.axe_x);})
    499                         .attr("y1",image_aujd_height+10).attr("y2", height);
     511                        .attr("y1",image_aujd.height+10).attr("y2", height);
    500512
    501513        // Ajout de l'image de la bougie
     
    503515                .datum(values2[values2.length-1])
    504516                .append("svg:image")
    505                         .attr("xlink:href", image_aujd)
    506                         .attr("x", function(d){return x(d.axe_x)-(image_aujd_width/2);})
    507                         .attr("width", image_aujd_width)
    508                         .attr("height", image_aujd_height);
     517                        .attr("xlink:href", image_aujd.url)
     518                        .attr("x", function(d){return x(d.axe_x)-(image_aujd.width/2);})
     519                        .attr("width", image_aujd.width)
     520                        .attr("height", image_aujd.height);
    509521}
    510522
     
    514526 * @param translatex
    515527 */
    516 function drawlines_interaction(translatex){
     528function climat_drawlines_interaction(translatex){
    517529        d3.selectAll(".interaction").remove();
    518530       
     
    529541                                .attr("x1", function(d) { return x(d.axe_x)+parseFloat(translatex);})
    530542                                .attr("x2",function(d) { return x(d.axe_x)+parseFloat(translatex);})
    531                                 .attr("y1",image_naissance_height+10).attr("y2", height);
     543                                .attr("y1",image_naissance.height+10).attr("y2", height);
    532544        /**
    533545         * Ajouter le triangle
     
    603615        });
    604616
    605         jQuery('#'+containerid).on('mousewheel', function(event) {
     617        jQuery('#'+container_id).on('mousewheel', function(event) {
    606618                if(!infobox_open && moving == false){
    607619                        var direction = (event.deltaY < 0 || event.deltaX > 0) ? 1 : -1;
     
    615627       
    616628        // Au click sur le graph, on cache l'infobox si visible
    617         jQuery('#'+containerid+',.'+infobox_class+' .close_box').on('click',function(event){
     629        jQuery('#'+container_id+',.'+infobox_class+' .close_box').on('click',function(event){
    618630                event.preventDefault();
    619631                event.stopPropagation();
     
    638650}
    639651
    640 function draw_perspectives_1(callback){
     652function climat_draw_perspectives_1(callback){
    641653        d3.text(draw_perspectives_1_fichiers[0], function(datasetText) {
    642654                var parsedCSV = d3.csv.parseRows(datasetText);
     
    695707                translate_defaut = (translate_defaut < 0) ? (translate_defaut*-1) : '-'+translate_defaut;
    696708                translate_new = x(date_origine-7+axis_translate);
    697                 translate_new = (translate_new < 0) ? (translate*-1) : '-'+translate_new;
     709                translate_new = (translate_new < 0) ? (translate_new * -1) : '-'+translate_new;
    698710               
    699711                /**
     
    746758                         * On retrace les diagrammes
    747759                         */
    748                         draw(translate_new);
    749                         drawlines_interaction(translate_new);
     760                        climat_draw(translate_new);
     761                        climat_drawlines_interaction(translate_new);
    750762                       
    751763                        /**
     
    798810                                        .attr("x1",function(d) { return x(d.axe_x); })
    799811                                        .attr("x2",function(d) { return x(d.axe_x); })
    800                                         .attr("y1",(image_demain_height+10)).attr("y2",height);
     812                                        .attr("y1",(image_demain.height+10)).attr("y2",height);
    801813
    802814                        // Ajout de l'image de la bougie
     
    804816                                .datum(values[values.length-1])
    805817                                .append("svg:image")
    806                                         .attr("xlink:href", image_demain)
    807                                         .attr("x", function(d){ return x(d.axe_x)-(image_demain_width/2);})
    808                                         .attr("width", image_demain_width)
    809                                         .attr("height", image_demain_height);
    810 
    811                         var rectangle = svg.select('.paths').append("rect")
     818                                        .attr("xlink:href", image_demain.url)
     819                                        .attr("x", function(d){ return x(d.axe_x)-(image_demain.width/2);})
     820                                        .attr("width", image_demain.width)
     821                                        .attr("height", image_demain.height);
     822                       
     823                        var legende_perspective_group = svg.select('.paths').append("g").attr("class","legende-perspective");
     824                        var xdata_height = d3.select('.x.axis').node().getBBox().height;
     825                        var rectangle = legende_perspective_group.append("rect")
    812826                                .attr("class","legende_perspective")
    813827                                .attr("x",x(values2[values2.length-1].axe_x)+12)
    814828                                .attr("y",height)
    815829                                .attr("width", x(values[values.length-1].axe_x)-x(values2[values2.length-1].axe_x)-20)
    816                                 .attr("height", 35);
    817                         var text_rectangle = svg.select('.paths').append("text")
     830                                .attr("height", xdata_height);
     831                        var text_rectangle = legende_perspective_group.append("text")
    818832                                .attr("x",x(values[values.length-1].axe_x)-20)
    819                                 .attr("y",(height+20))
     833                                .attr("y",(height+25))
    820834                                .attr("class", "legende_perspective_text")
    821835                                .style("text-anchor", "end")
     
    833847}
    834848
    835 function draw_perspectives_2(callback){
    836        
     849function climat_draw_perspectives_2(callback){
    837850        d3.text(draw_perspectives_2_fichiers[0], function(datasetText) {
    838851                var parsedCSV = d3.csv.parseRows(datasetText);
     
    867880                translate_defaut = (translate_defaut < 0) ? (translate_defaut*-1) : '-'+translate_defaut;
    868881                translate_new = x(date_origine-7+axis_translate);
    869                 translate_new = (translate_new < 0) ? (translate*-1) : '-'+translate_new;
     882                translate_new = (translate_new < 0) ? (translate_new*-1) : '-'+translate_new;
    870883               
    871884                /**
     
    882895                         * On retrace les diagrammes
    883896                         */
    884                         draw(translate_new);
    885                         drawlines_interaction(translate_new);
     897                        climat_draw(translate_new);
     898                        climat_drawlines_interaction(translate_new);
    886899                       
    887900                        /**
     
    905918                                        .attr("x1", function( d ) { return x( d.axe_x ); })
    906919                                        .attr("x2",function( d ) { return x( d.axe_x ); })
    907                                         .attr("y1",image_demain_height+10).attr("y2", height);
     920                                        .attr("y1",image_demain.height+10).attr("y2", height);
    908921
    909922                        // Ajout de l'image de la bougie
     
    911924                                .datum(values[values.length-1])
    912925                                .append("svg:image")
    913                                         .attr("xlink:href", image_demain)
    914                                         .attr("x", function(d){return x(d.axe_x)-(image_demain_width/2);})
    915                                         .attr("width", image_demain_width)
    916                                         .attr("height", image_demain_height);
    917                         var rectangle = svg.select('.paths').append("rect")
     926                                        .attr("xlink:href", image_demain.url)
     927                                        .attr("x", function(d){return x(d.axe_x)-(image_demain.width/2);})
     928                                        .attr("width", image_demain.width)
     929                                        .attr("height", image_demain.height);
     930                       
     931                        var legende_perspective_group = svg.select('.paths').append("g").attr("class","legende-perspective");
     932                        var xdata_height = d3.select('.x.axis').node().getBBox().height;
     933                        var rectangle = legende_perspective_group.append("rect")
    918934                                .attr("class","legende_perspective")
    919935                                .attr("x",x(values2[values2.length-1].axe_x)+12)
    920936                                .attr("y",height)
    921937                                .attr("width",x(values[values.length-1].axe_x)-x(values2[values2.length-1].axe_x)-20)
    922                                 .attr("height",35);
    923                         var text_rectangle = svg.select('.paths').append("text")
     938                                .attr("height",xdata_height);
     939                        var text_rectangle = legende_perspective_group.append("text")
    924940                                .attr("x",x(values[values.length-1].axe_x)-20)
    925                                 .attr("y",(height+20))
     941                                .attr("y",(height+25))
    926942                                .attr("class","legende_perspective_text")
    927943                                .text(infographie_lang.texte_estimations_ncdc);
Note: See TracChangeset for help on using the changeset viewer.