source: plugins_spip/terraeco_infographie/trunk/infographie.html @ 7989

Last change on this file since 7989 was 7989, checked in by kent1, 6 years ago

Utiliser every au lieu de forEach si on cherche quelque chose dans les tableaux, cela permet de s'arrêter avec return false (sinon il faut absolument return true)

On évite une recherche dans values_commentaires lors de graph_replace car on peut savoir tout de suite si l'on a un commentaire

Un peu de documentation dans le code

File size: 20.9 KB
Line 
1<BOUCLE_principale(INFOGRAPHIES) {id_infographie}>
2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3[(#REM) Cf.: http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
4]<!--[if lt IE 7 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie6"> <![endif]-->
5<!--[if IE 7 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie7"> <![endif]-->
6<!--[if IE 8 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie8"> <![endif]-->
7<!--[if IE 9 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie9"> <![endif]-->
8<!--[if (gt IE 9)|!(IE)]><!--> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js"> <!--<![endif]-->
9<head>
10<script type='text/javascript'>/*<![CDATA[*/(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement);/*]]>*/</script>
11<title>[(#TITRE|couper{80}|textebrut) - ][(#NOM_SITE_SPIP|textebrut)]</title>
12[<meta name="description" content="(#INTRODUCTION{150}|attribut_html)" />]
13[<link rel="canonical" href="(#URL_INFOGRAPHIE|url_absolue)" />]
14[<link rel="stylesheet" href="(#CHEMIN{css/reset.css}|direction_css)" type="text/css" />]
15[<link rel="stylesheet" href="(#CHEMIN{css/infographie.css}|direction_css)" type="text/css" />]
16#INSERT_HEAD
17[<script type="text/javascript" src="(#CHEMIN{javascript/jquery.mousewheel.js})"></script>]
18[<script type="text/javascript" src="(#CHEMIN{javascript/d3.v3.js})"></script>]
19</head>
20
21<body class="pas_surlignable page_infographie">
22<div class="page">
23       
24        <div class="main infographie[ (#INFO_CSS_CLASS{infographies_data,#ENV{donnees}})]">
25                <div class="wrapper hfeed">
26                <div class="content hentry" id="content">
27                        <div class="cartouche">
28                                <h1 class="#EDIT{titre} surlignable">[(#LOGO_ARTICLE_RUBRIQUE|image_reduire{40,*}) ]#TITRE</h1>
29                        </div>
30                        <div class="menu_top">
31                                <a href="[(#SELF|parametre_url{naissance,''}|parametre_url{donnees,''})]" title="<:terraeco:title_lien_home|attribut_html:>" class="spip_out">[(#CHEMIN{images/image_home.png}|balise_img{home}|inserer_attribut{onMouseOver,[this.src="(#CHEMIN{images/image_home_hover.png})"]}|inserer_attribut{onMouseOut,[this.src="(#CHEMIN{images/image_home.png})"]})]</a>
32                                <a href="http://www.terraeco.net" title="<:terraeco:title_lien_terraeco|attribut_html:>" class="spip_out">[(#CHEMIN{images/image_terraeco.png}|balise_img{terraeco}|inserer_attribut{onMouseOver,[this.src="(#CHEMIN{images/image_terraeco_hover.png})"]}|inserer_attribut{onMouseOut,[this.src="(#CHEMIN{images/image_terraeco.png})"]})]</a>
33                                <a href="http://www.twitter.com" title="<:terraeco:title_lien_twitter|attribut_html:>" class="spip_out">[(#CHEMIN{images/image_twitter.png}|balise_img{twitter}|inserer_attribut{onMouseOver,[this.src="(#CHEMIN{images/image_twitter_hover.png})"]}|inserer_attribut{onMouseOut,[this.src="(#CHEMIN{images/image_twitter.png})"]})]</a>
34                                <a href="http://www.facebook.com" title="<:terraeco:title_lien_facebook|attribut_html:>" class="spip_out">[(#CHEMIN{images/image_facebook.png}|balise_img{facebook}|inserer_attribut{onMouseOver,[this.src="(#CHEMIN{images/image_facebook_hover.png})"]}|inserer_attribut{onMouseOut,[this.src="(#CHEMIN{images/image_facebook.png})"]})]</a>
35                        </div>
36                        <BOUCLE_si_pas_naissance(CONDITION){si #ENV{naissance}|non|ou{#ENV{naissance}|<{1900}}|ou{#ENV{naissance}|>{2010}}|oui}>
37                        <div class="formulaire_spip[(#ENV{naissance}|strlen|et{#ENV{naissance}|<{1900}|ou{#ENV{naissance}|>{2010}}}|oui)erreur #SET{erreur_naissance,oui}]">
38                                <form  action="[(#SELF)]" method="get">
39                                        [(#SELF|form_hidden)]
40                                        <div class="champ">
41                                                <label for="naissance"><:terraeco:label_naissance:></label>
42                                                [(#GET{erreur_naissance}|=={oui}|oui)<span class="message_erreur">Êtes-vous sûr d'être né en #ENV{naissance} ?</span>]
43                                                <input type="text" class="texte" id="naissance" name="naissance" maxlength="4" size="4" value="#ENV{naissance,''}" />
44                                        </div>
45                                        <div class="boutons">
46                                                <input type="submit" class="submit" id="submit" value="OK" />
47                                        </div>
48                                </form>
49                        </div>
50                        </BOUCLE_si_pas_naissance>
51                        </B_si_pas_naissance>
52                                <BOUCLE_si_naissance_1951(CONDITION){si#ENV{naissance}|<{1951}|oui}>
53                                <div class="formulaire_spip">
54                                        <form  action="[(#SELF)]" method="get">
55                                                [(#SELF|form_hidden)]
56                                                <input type="hidden" name="naissance" value="1951" />
57                                                <div class="champ">#SET{nb,#ENV{naissance}|moins{1951}|replace{'-',''}}
58                                                [<p>(#GET{nb}|singulier_ou_pluriel{terraeco:texte_1951_singulier,terraeco:texte_1951})</p>]
59                                                </div>
60                                                <div class="boutons">
61                                                        <input type="submit" class="submit" id="submit" value="OK" />
62                                                </div>
63                                        </form>
64                                </div>
65                                </BOUCLE_si_naissance_1951>
66                                </B_si_naissance_1951>
67                                <BOUCLE_jeu_selectionne(INFOGRAPHIES_DATAS){id_infographies_data=#ENV{donnees}}>
68                                <div class="infographie[ (#CSS_CLASS)]">
69                                        <div class="description_donnees">
70                                                [<h3>(#TITRE)</h3>]
71                                                [<div class="texte">
72                                                (#TEXTE)
73                                                </div>]
74                                                [<div class="credits">
75                                                (#CREDITS)
76                                                </div>]
77                                        </div>
78                                       
79                                        <B_infographies_logo>
80                                        <div class="infographies_logo">
81                                        <BOUCLE_infographies_logo(INFOGRAPHIES_DATAS spip_infographies_datas_liens){objet=infographie}{id_objet=#ID_INFOGRAPHIE}>
82                                        [(#ID_INFOGRAPHIES_DATA|=={#ENV{donnees}}|non)
83                                        <a href="[(#SELF|parametre_url{donnees,#ID_INFOGRAPHIES_DATA})]">[(#LOGO_INFOGRAPHIES_DATA|image_reduire{100,100})]</a>]
84                                        [(#ID_INFOGRAPHIES_DATA|=={#ENV{donnees}}|oui)
85                                        <strong class="on">[(#LOGO_INFOGRAPHIES_DATA_SURVOL|image_reduire{100,100})]</strong>]
86                                        </BOUCLE_infographies_logo>
87                                        </div>
88                                        </B_infographies_logo>
89                                        <BOUCLE_naissance_min(INFOGRAPHIES_DONNEES){id_infographies_data}{par axe_x}{0,1}>
90                                        #SET{naissance_min,#AXE_X}
91                                        </BOUCLE_naissance_min>
92                                        <div id="graph1" class="aGraph" style="position:relative;width:100%;height:400px"></div>
93                                        <script>
94                                                var containerid='graph1',values = [],values1 = [], values2 = [],values_commentaire= [], value_naissance = [], value_origine = [],container,tip,ligne_naissance_groupe,ligne_naissance,ligne_interactive;
95                                                var naissance = date_origine = [(#ENV{naissance,#GET{naissance_min}}|<{#GET{naissance_min}}|?{#GET{naissance_min},#ENV{naissance}}|intval)],
96                                                        centre_origine = 1962,translate_defaut = 0;
97                                                var margin = {top: 0, right: 5, bottom: 60, left: 5},
98                                                        width = $('#'+containerid).width() - margin.left - margin.right,
99                                                        step = parseInt(width/22),
100                                                        width = 22*step,
101                                                        compte_depuis_naissance = 0,
102                                                        height = 450 - margin.top - margin.bottom,
103                                                        moving = false,
104                                                        cumule = [(#ENV{donnees}|=={1}|?{true,false})];
105
106                                                $('#'+containerid).on('mousewheel', function(event) {
107                                                        console.log('wheel');
108                                                        if($('.infobox').is(':hidden') && moving == false){
109                                                                if(event.deltaX > 0)
110                                                                        var val = 1;
111                                                                else if(event.deltaX < 0)
112                                                                        var val = -1;
113                                                                else if(event.deltaY > 0)
114                                                                        var val = 1;
115                                                                else if(event.deltaY < 0)
116                                                                        var val = -1;
117                                                                moving = true;
118                                                                graph_replace(val);
119                                                        }else if($('.infobox').is(':visible')){
120                                                               
121                                                        }
122                                                        return false;
123                                                });
124                                               
125                                                // Avance le graph de 1 ou le recule de -1
126                                                function graph_replace(valeur){
127                                                        if(((valeur == '+1') && date_origine == values[values.length-1].axe_x) || ((valeur == '-1') && date_origine  == values[0].axe_x))
128                                                                return false;
129                                                       
130                                                        date_origine = date_origine+valeur;
131
132                                                        values.every(function(row, i){
133                                                                if(parseInt(row.axe_x) == date_origine){
134                                                                        d = row;
135                                                                        return false;
136                                                                }
137                                                                return true;
138                                                        });
139                                                       
140                                                        var translatex = x(value_origine.axe_x)-x(d.axe_x)-translate_defaut;
141
142                                                        $('.tooltip').html(+d.axe_y+'#UNITE');
143                                                        var left = x(value_naissance.axe_x)-translate_defaut-$('.tooltip').outerWidth()-14;
144                                                        var top = y(d.axe_z) - ($('.tooltip').outerHeight()/2);
145                                                        if($('.tooltip').is(':hidden'))
146                                                                $('.tooltip').css({'top':top,'left':left}).show();
147                                                        else
148                                                                $('.tooltip').animate({'top':top,'left':left},800);
149                                                       
150                                                        // Si on a un commentaire, on l'affiche
151                                                        if(typeof(d.commentaire) == 'string' && d.commentaire.length > 1){
152                                                                var show_info = function(){
153                                                                        infobox
154                                                                                .html('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="logo">'+d.logo+'</div><div class="contenu"><span class="annee">'+d.axe_x+'</span>'+d.commentaire+'</div>')
155                                                                                        .transition()
156                                                                                        .duration(800)
157                                                                                        .style("display", 'block').each("end", function(){
158                                                                                                d3.select("#"+containerid).select('.infobox .close_box').on('click',function(){
159                                                                                                        infobox
160                                                                                                                .transition()
161                                                                                                                .duration(500)
162                                                                                                                        .style("display", 'none');
163                                                                                                });
164                                                                                        });
165                                                                        }
166                                                                setTimeout(show_info,400);
167                                                        }
168                                                       
169                                                        d3.select(".paths").transition()
170                                                                .duration(700)
171                                                                .attr("transform", "translate("+translatex+", 0)").each("end", function(){
172                                                                        moving = false;
173                                                                });
174                                                }
175                                               
176                                                // Scales and axes. Note the inverted domain for the y-scale: bigger is up!
177                                                var x = d3.scale.linear(),
178                                                        y = d3.scale.linear().range([height, 0]),
179                                                        xAxis = d3.svg.axis().scale(x).ticks(56).tickFormat(d3.format(".0f")).orient("bottom");
180                                                        yAxis = d3.svg.axis().scale(y).ticks(4).orient("left");
181                                               
182                                                // A line generator, for the dark stroke.
183                                                var line = d3.svg.line()
184                                                        //.interpolate("monotone")
185                                                        .x(function(d) { return x(d.axe_x); })
186                                                        .y(function(d) { return y(d.axe_z); });
187                                               
188                                                // Add an SVG element with the desired dimensions and margin.
189                                                var svg = d3.select("#"+containerid).append("svg")
190                                                        .attr("width", width + margin.left + margin.right)
191                                                        .attr("height", height + margin.top + margin.bottom)
192                                                        .append("g")
193                                                        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
194
195                                                var paths = svg.append("g")
196                                                        .attr("class", "paths")
197                                                       
198                                                // Ajouter le tooltip que l'on cache automatiquement
199                                                tip = d3.select('#'+containerid).append("div")
200                                                        .attr("class", "tooltip")
201                                                        .style("display", 'none');
202                                               
203                                                // Ajouter l'infobox pour les anecdotes que l'on cache automatiquement
204                                                infobox = d3.select('#'+containerid).append("div")
205                                                        .attr("class", "infobox")
206                                                        .style("display", 'none').html('<div class="logo"><div class="contenu"></div>');
207                                               
208                                                // Au click sur le graph, on cache l'infobox si visible
209                                                $('#'+containerid).on('click',function(){
210                                                        if($('.infobox').is(':visible'))
211                                                                $('.infobox').fadeOut();
212                                                });
213                                                // Add the clip path.
214                                                svg.append("clipPath")
215                                                        .attr("id", "clip")
216                                                        .append("rect")
217                                                        .attr("width", width)
218                                                        .attr("height", height);
219
220                                                /**
221                                                 * Récupération des données et on fabrique nos groupes de valeurs
222                                                 */
223                                                d3.json("[(#URL_PAGE{infographies_data}|parametre_url{id_infographies_data,#ID_INFOGRAPHIES_DATA,'&'})]", function(error, data) {
224                                                       
225                                                        values = data;
226                                                        var origine = 0;
227       
228                                                        values.forEach(function(row, i){
229                                                                row.axe_x = parseFloat(row.axe_x).toFixed();
230                                                                row.axe_y = parseFloat(row.axe_y.replace(',','.')).toFixed(2);
231                                                                if(cumule)
232                                                                        origine = row.axe_z = parseFloat(parseFloat(origine)+parseFloat(row.axe_y)).toFixed(2);
233                                                                else
234                                                                        origine = row.axe_z = parseFloat(row.axe_y).toFixed(2);
235                                                                if(row.axe_x <= naissance)
236                                                                        values1.push(row);
237                                                                if(row.axe_x >= naissance)
238                                                                        values2.push(row);
239                                                                if(row.axe_x == naissance)
240                                                                        value_naissance = value_origine = row;
241                                                                if(typeof(row.commentaire) == 'string' && row.commentaire.length > 1)
242                                                                        values_commentaire.push(row);
243                                                        });
244
245                                                        xmin = values[0].axe_x;
246                                                        xmax = values[values.length-1].axe_x;
247                                                        /**
248                                                         * Si naissance - 7 ans est dans la visu, on part de là
249                                                         */
250                                                        if((naissance - 7) > xmin){
251                                                                origine = naissance -7;
252                                                                centre_origine = naissance + 4;
253                                                        }
254                                                        /**
255                                                         * Sinon le centre sera toujours la valeur minimale + 11 ans
256                                                         * et le point d'origine la valeur min
257                                                         */
258                                                        else{
259                                                                origine = xmin;
260                                                                centre_origine = parseInt(xmin)+11;
261                                                        }
262
263                                                        // Utilisation de every pour couper lorsque l'on a trouvé
264                                                        values.every(function(row,i){
265                                                                console.log(i);
266                                                                if(parseInt(row.axe_x) == origine){
267                                                                        d = row;
268                                                                        return false;
269                                                                }
270                                                                return true;
271                                                        });
272
273                                                        real_width = (width/22)*(xmax-xmin);
274                                                        x.range([0, real_width]).domain([parseInt(xmin), parseInt(xmax)]);
275                                                        y.domain([d3.min(values, function(d) { return parseFloat(d.axe_z); }), d3.max(values, function(d) { return parseFloat(d.axe_z); })]).nice();
276                                                        translate_defaut = x(d.axe_x);
277                                                       
278                                                        draw(translate_defaut);
279                                                        drawlines_interaction(translate_defaut);
280                                                });
281                                               
282                                                /**
283                                                 * Fonction de création des objets du diagramme
284                                                 */
285                                                function draw(translatex){
286                                                        d3.selectAll(".apresnaissance,.avtnaissance,.axis,.ligne_naissance,.texte_naissance,.circle_naissance,.infos_dots").remove();
287                                                        d3.select(".paths")
288                                                                .attr("transform", "translate(-"+translatex+", 0)")
289                                                       
290                                                        // On ajoute la ligne de données pour la période aprÚs naissance
291                                                        svg.selectAll('.paths').append("path")
292                                                                .attr("class", "line apresnaissance")
293                                                                .attr("d", line(values2));
294       
295                                                        // Ajout la ligne de données avant la naissance
296                                                        svg.selectAll('.paths').append("path")
297                                                                .attr("class", "line avtnaissance")
298                                                                .attr("d", line(values1));
299       
300                                                        // Ajout de l'axe X, on fait une rotation des textes à -270°
301                                                        svg.selectAll('.paths').append("g")
302                                                                .attr("class", "x axis")
303                                                                .attr("transform", "translate(0," + height + ")")
304                                                                .call(xAxis)
305                                                                .selectAll("text")
306                                                                        .style("text-anchor", "start")
307                                                                        .attr("dy", "-0.6em")
308                                                                        .attr("dx", "1em")
309                                                                        .attr("transform", function(d) {
310                                                                                return "rotate(-270)" 
311                                                                        });
312                                                        // Ajout d'une class 'tickold' sur les labels de l'axe X plus vieux que la naissance
313                                                        $('.x .tick text').each(function(){
314                                                                if(parseInt($(this).text()) < value_naissance.axe_x){
315                                                                        $(this).parent('.tick').attr('class','tick tickold');
316                                                                }
317                                                        });
318                                                       
319                                                        // Ajout de la légende des axes
320                                                        svg.append("text") 
321                                                                .attr("x",-5)
322                                                                .attr("y",445)
323                                                                .attr("class", "legende")
324                                                                .style("text-anchor", "start")
325                                                                .text("#AXE_Y");
326
327                                                        // Ajout des points d'Anecdotes cliquables
328                                                        // sera certainement à supprimer aprÚs debug
329                                                        d3.select("#"+containerid).select('.paths')
330                                                                .selectAll(".dot")
331                                                                .data(values_commentaire)
332                                                                .enter()
333                                                                        .append('circle')
334                                                                        .attr("class","infos_dots")
335                                                                        .attr("cx", function(d) { return x(d.axe_x); })
336                                                                        .attr("cy",function(d) { return y(d.axe_z); })
337                                                                        .attr('r',6)
338                                                                        .on('click',function(d){
339                                                                                d3.select('.infos_dots .active')
340                                                                                        .transition().duration(300).attr('stroke-width','3');
341                                                                                d3.select(this)
342                                                                                        .transition().duration(400).attr('stroke-width','5');
343                                                                                infobox
344                                                                                        .html('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="logo">'+d.logo+'</div><div class="contenu"><span class="annee">'+d.axe_x+'</span>'+d.commentaire+'</div>')
345                                                                                                .transition()
346                                                                                                .duration(1000)
347                                                                                                .style("display", 'block');
348                                                                                d3.select("#"+containerid).select('.infobox .close_box').on('click',function(){
349                                                                                        d3.select('.infos_dots .active').classed("active", false)
350                                                                                                .transition().duration(300).attr('stroke-width','3');
351                                                                                        infobox
352                                                                                                .transition()
353                                                                                                .duration(500)
354                                                                                                        .style("display", 'none');
355                                                                                });
356                                                                        });
357
358                                                        // Ajout du groupe qui contiendra les éléments de la date de naissance
359                                                        ligne_naissance_groupe = svg.select('.paths').append("g")
360                                                                .attr("class", "birth-line");
361       
362                                                        // Ajout de la ligne de naissance
363                                                        ligne_naissance = ligne_naissance_groupe
364                                                                .datum( value_naissance )
365                                                                .append("line")
366                                                                        .attr( 'class', 'ligne_naissance' )
367                                                                        .attr("x1", function( d ) {
368                                                                                return x( d.axe_x );
369                                                                        }).attr("x2",function( d ) {
370                                                                                return x( d.axe_x );
371                                                                        }) // vertical line so same value on each
372                                                                        .attr("y1",100).attr("y2", height);
373       
374                                                        // Ajout du cercle en haut de la ligne de naissance
375                                                        ligne_naissance_groupe
376                                                                .datum(value_naissance)
377                                                                .append("circle")
378                                                                        .attr('class','circle_naissance')
379                                                                        .attr( 'r', 20 )
380                                                                        .attr("cx", function( d ) {
381                                                                                return x( d.axe_x );
382                                                                        })
383                                                                        .attr("cy",40);
384
385                                                        // Ajout du texte "Votre naissance"
386                                                        ligne_naissance_groupe
387                                                                .datum(value_naissance)
388                                                                .append("text")
389                                                                        .attr('class','texte_naissance')
390                                                                        .text('VOTRE NAISSANCE')
391                                                                        .attr("x", function(d){
392                                                                                return x(d.axe_x);
393                                                                        })
394                                                                        .attr("y",80);
395                                                       
396                                                        // Ajout de l'image de la bougie
397                                                        ligne_naissance_groupe
398                                                                .datum(value_naissance)
399                                                                .append("svg:image")
400                                                                        .attr("xlink:href", "[(#CHEMIN{images/bougie.png}|timestamp)]")
401                                                                        .attr("x", function(d){
402                                                                                return x(value_naissance.axe_x)-17;
403                                                                        })
404                                                                        .attr("y", "22")
405                                                                        .attr("width", "35")
406                                                                        .attr("height", "35");
407                                                                       
408                                                       
409                                                        // Ajout du groupe pour Aujourd'hui
410                                                        ligne_aujd_groupe = svg.select('.paths').append("g")
411                                                                .attr("class", "today-line");
412       
413                                                        // Ajout de la ligne d'aujourd'hui
414                                                        ligne_aujd = ligne_aujd_groupe
415                                                                .datum(values[values.length-1])
416                                                                .append("line")
417                                                                        .attr( 'class', 'ligne_aujd' )
418                                                                        .attr("x1", function( d ) {
419                                                                                return x( d.axe_x );
420                                                                        }).attr("x2",function( d ) {
421                                                                                return x( d.axe_x );
422                                                                        }) // vertical line so same value on each
423                                                                        .attr("y1",100).attr("y2", height);
424       
425                                                        // Ajout du cercle en haut de la ligne de naissance
426                                                        ligne_aujd_groupe
427                                                                .datum(values[values.length-1])
428                                                                .append("circle")
429                                                                        .attr('class','circle_aujd_main')
430                                                                        .attr( 'r', 15 )
431                                                                        .attr("cx", function( d ) {
432                                                                                return x( d.axe_x );
433                                                                        })
434                                                                        .attr("cy",40);
435                                                       
436                                                        // Ajout du cercle en haut de la ligne de naissance
437                                                        ligne_aujd_groupe
438                                                                .datum(values[values.length-1])
439                                                                .append("circle")
440                                                                        .attr('class','circle_aujd_small')
441                                                                        .attr( 'r', 6 )
442                                                                        .attr("cx", function( d ) {
443                                                                                return x( d.axe_x );
444                                                                        })
445                                                                        .attr("cy",40);
446                                                        // Ajout du texte "Aujourd'hui"
447                                                        ligne_aujd_groupe
448                                                                .datum(values[values.length-1])
449                                                                .append("text")
450                                                                        .attr('class','texte_aujd')
451                                                                        .text("AUJOURD'HUI")
452                                                                        .attr("x", function(d){
453                                                                                return x(d.axe_x);
454                                                                        })
455                                                                        .attr("y",80);
456                                                       
457                                                }
458
459                                                /**
460                                                 * Afficher le bloc d'interaction
461                                                 */
462                                                function drawlines_interaction(translatex){
463                                                        ligne_interactive_groupe = svg.append("g")
464                                                                .attr("class", "interaction");
465                                                               
466                                                        /**
467                                                         * Ajouter la ligne d'interaction
468                                                         */
469                                                        ligne_interactive =  ligne_interactive_groupe
470                                                                .datum(value_origine)
471                                                                        .append("line")
472                                                                                .attr('class', 'ligne_interactive')
473                                                                                .attr("x1", function(d) {
474                                                                                        return x( d.axe_x )-translatex;
475                                                                                }).attr("x2",function(d) {
476                                                                                        return x(d.axe_x)-translatex;
477                                                                                })
478                                                                .attr("y1",100).attr("y2", height);
479                                                        /**
480                                                         * Ajouter le triangle
481                                                         */
482                                                        ligne_interactive_groupe.append('path')
483                                                                .attr('class','triangle')
484                                                                .attr('d', function(d) { 
485                                                                        var x1 = (x( value_origine.axe_x )-translatex-14), x2 = x( value_origine.axe_x)-translatex+14,x3 = x( value_origine.axe_x )-translatex;
486                                                                        var x4 = 'M '+ x1 +' 390 L '+x2+' 390 L '+x3+' 365 z';
487                                                                        return x4;
488                                                                });
489                                                }
490                                                </script>
491                                </div>
492                                </BOUCLE_jeu_selectionne>
493                                </B_jeu_selectionne>
494                                <B_jeux>
495                                <div class="texte">#TEXTE</div>
496                                <div class="liste_infographies">
497                                <BOUCLE_jeux(INFOGRAPHIES_DATAS spip_infographies_datas_liens){objet=infographie}{id_objet=#ID_INFOGRAPHIE}>
498                                <a href="[(#SELF|parametre_url{donnees,#ID_INFOGRAPHIES_DATA})]">[(#LOGO_INFOGRAPHIES_DATA|image_reduire{300,300})]</a>
499                                </BOUCLE_jeux>
500                                </div>
501                                </B_jeux>
502                                <//B_jeu_selectionne>
503                                <//B_si_naissance_1951>
504                        <//B_si_pas_naissance>
505                </div>
506                </div>
507        </div>
508        [<footer class="footer clearfix">
509                (#CREDITS|image_reduire{100,100})
510        </footer>]
511</div>
512</body>
513</html>
514</BOUCLE_principale>
Note: See TracBrowser for help on using the repository browser.