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

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

Incrémenter l'origine au bon moment

File size: 20.5 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.forEach(function(row, i){
133                                                                if(parseInt(row.axe_x) == date_origine){
134                                                                        d = row;
135                                                                        return;
136                                                                }
137                                                        });
138                                                       
139                                                        var translatex = x(value_origine.axe_x)-x(d.axe_x)-translate_defaut;
140
141                                                        $('.tooltip').html(+d.axe_y+'#UNITE');
142                                                        var left = x(value_naissance.axe_x)-translate_defaut-$('.tooltip').outerWidth()-14;
143                                                        var top = y(d.axe_z) - ($('.tooltip').outerHeight()/2);
144                                                        if($('.tooltip').is(':hidden'))
145                                                                $('.tooltip').css({'top':top,'left':left}).show();
146                                                        else
147                                                                $('.tooltip').animate({'top':top,'left':left},800);
148                                                       
149                                                        values_commentaire.forEach(function(row, i){
150                                                                if(parseInt(row.axe_x) == date_origine){
151                                                                        d = row;
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                                                                        return;
168                                                                }
169                                                        });
170                                                       
171                                                        d3.select(".paths").transition()
172                                                                .duration(900)
173                                                                .attr("transform", "translate("+translatex+", 0)").each("end", function(){
174                                                                        moving = false;
175                                                                });
176                                                }
177                                               
178                                                // Scales and axes. Note the inverted domain for the y-scale: bigger is up!
179                                                var x = d3.scale.linear(),
180                                                        y = d3.scale.linear().range([height, 0]),
181                                                        xAxis = d3.svg.axis().scale(x).ticks(56).tickFormat(d3.format(".0f")).orient("bottom");
182                                                        yAxis = d3.svg.axis().scale(y).ticks(4).orient("left");
183                                               
184                                                // A line generator, for the dark stroke.
185                                                var line = d3.svg.line()
186                                                        //.interpolate("monotone")
187                                                        .x(function(d) { return x(d.axe_x); })
188                                                        .y(function(d) { return y(d.axe_z); });
189                                               
190                                                // Add an SVG element with the desired dimensions and margin.
191                                                var svg = d3.select("#"+containerid).append("svg")
192                                                        .attr("width", width + margin.left + margin.right)
193                                                        .attr("height", height + margin.top + margin.bottom)
194                                                        .append("g")
195                                                        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
196                                                var paths = svg.append("g")
197                                                        .attr("class", "paths")
198                                                tip = d3.select("#graph1").append("div")
199                                                        .attr("class", "tooltip")
200                                                        .style("display", 'none');
201                                               
202                                                $('#'+containerid).on('click',function(){
203                                                        if($('.infobox').is(':visible'))
204                                                                $('.infobox').fadeOut();
205                                                });
206                                                infobox = d3.select("#graph1").append("div")
207                                                        .attr("class", "infobox")
208                                                        .style("display", 'none').html('<div class="logo"><div class="contenu"></div>');
209       
210                                                // Add the clip path.
211                                                svg.append("clipPath")
212                                                        .attr("id", "clip")
213                                                        .append("rect")
214                                                        .attr("width", width)
215                                                        .attr("height", height);
216
217                                                /**
218                                                 * Récupération des données et on fabrique nos groupes de valeurs
219                                                 */
220                                                d3.json("[(#URL_PAGE{infographies_data}|parametre_url{id_infographies_data,#ID_INFOGRAPHIES_DATA,'&'})]", function(error, data) {
221                                                       
222                                                        values = data;
223                                                        var origine = 0;
224       
225                                                        values.forEach(function(row, i){
226                                                                row.axe_x = parseFloat(row.axe_x).toFixed();
227                                                                row.axe_y = parseFloat(row.axe_y.replace(',','.')).toFixed(2);
228                                                                if(cumule)
229                                                                        origine = row.axe_z = parseFloat(parseFloat(origine)+parseFloat(row.axe_y)).toFixed(2);
230                                                                else
231                                                                        origine = row.axe_z = parseFloat(row.axe_y).toFixed(2);
232                                                                if(row.axe_x <= naissance)
233                                                                        values1.push(row);
234                                                                if(row.axe_x >= naissance)
235                                                                        values2.push(row);
236                                                                if(row.axe_x == naissance)
237                                                                        value_naissance = value_origine = row;
238                                                                if(typeof(row.commentaire) == 'string' && row.commentaire.length > 1)
239                                                                        values_commentaire.push(row);
240                                                        });
241
242                                                        xmin = values[0].axe_x;
243                                                        xmax = values[values.length-1].axe_x;
244                                                        /**
245                                                         * Si naissance - 7 ans est dans la visu, on part de là
246                                                         */
247                                                        if((naissance - 7) > xmin){
248                                                                origine = naissance -7;
249                                                                centre_origine = naissance + 4;
250                                                        }
251                                                        /**
252                                                         * Sinon le centre sera toujours la valeur minimale + 11 ans
253                                                         * et le point d'origine la valeur min
254                                                         */
255                                                        else{
256                                                                origine = xmin;
257                                                                centre_origine = parseInt(xmin)+11;
258                                                        }
259
260                                                        values.forEach(function(row, i){
261                                                                if(parseInt(row.axe_x) == origine)
262                                                                        d = row;
263                                                        });
264
265                                                        real_width = (width/22)*(xmax-xmin);
266                                                        x.range([0, real_width]).domain([parseInt(xmin), parseInt(xmax)]);
267                                                        y.domain([d3.min(values, function(d) { return parseFloat(d.axe_z); }), d3.max(values, function(d) { return parseFloat(d.axe_z); })]).nice();
268                                                        translate_defaut = x(d.axe_x);
269                                                       
270                                                        draw(translate_defaut);
271                                                        drawlines_interaction(translate_defaut);
272                                                });
273                                               
274                                                /**
275                                                 * Fonction de création des objets du diagramme
276                                                 */
277                                                function draw(translatex){
278                                                        d3.selectAll(".apresnaissance,.avtnaissance,.axis,.ligne_naissance,.texte_naissance,.circle_naissance,.infos_dots").remove();
279                                                        d3.select(".paths")
280                                                                .attr("transform", "translate(-"+translatex+", 0)")
281                                                       
282                                                        // On ajoute la ligne de données pour la période aprÚs naissance
283                                                        svg.selectAll('.paths').append("path")
284                                                                .attr("class", "line apresnaissance")
285                                                                .attr("d", line(values2));
286       
287                                                        // Ajout la ligne de données avant la naissance
288                                                        svg.selectAll('.paths').append("path")
289                                                                .attr("class", "line avtnaissance")
290                                                                .attr("d", line(values1));
291       
292                                                        // Ajout de l'axe X, on fait une rotation des textes à -270°
293                                                        svg.selectAll('.paths').append("g")
294                                                                .attr("class", "x axis")
295                                                                .attr("transform", "translate(0," + height + ")")
296                                                                .call(xAxis)
297                                                                .selectAll("text")
298                                                                        .style("text-anchor", "start")
299                                                                        .attr("dy", "-0.6em")
300                                                                        .attr("dx", "1em")
301                                                                        .attr("transform", function(d) {
302                                                                                return "rotate(-270)" 
303                                                                        });
304                                                        // Ajout d'une class 'tickold' sur les labels de l'axe X plus vieux que la naissance
305                                                        $('.x .tick text').each(function(){
306                                                                if(parseInt($(this).text()) < value_naissance.axe_x){
307                                                                        $(this).parent('.tick').attr('class','tick tickold');
308                                                                }
309                                                        });
310                                                       
311                                                        // Ajout de la légende des axes
312                                                        svg.append("text") 
313                                                                .attr("x",-5)
314                                                                .attr("y",445)
315                                                                .attr("class", "legende")
316                                                                .style("text-anchor", "start")
317                                                                .text("#AXE_Y");
318
319                                                        // Ajout des points d'Anecdotes cliquables
320                                                        // sera certainement à supprimer aprÚs debug
321                                                        d3.select("#"+containerid).select('.paths')
322                                                                .selectAll(".dot")
323                                                                .data(values_commentaire)
324                                                                .enter()
325                                                                        .append('circle')
326                                                                        .attr("class","infos_dots")
327                                                                        .attr("cx", function(d) { return x(d.axe_x); })
328                                                                        .attr("cy",function(d) { return y(d.axe_z); })
329                                                                        .attr('r',6)
330                                                                        .on('click',function(d){
331                                                                                d3.select('.infos_dots .active')
332                                                                                        .transition().duration(300).attr('stroke-width','3');
333                                                                                d3.select(this)
334                                                                                        .transition().duration(400).attr('stroke-width','5');
335                                                                                infobox
336                                                                                        .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>')
337                                                                                                .transition()
338                                                                                                .duration(1000)
339                                                                                                .style("display", 'block');
340                                                                                d3.select("#"+containerid).select('.infobox .close_box').on('click',function(){
341                                                                                        d3.select('.infos_dots .active').classed("active", false)
342                                                                                                .transition().duration(300).attr('stroke-width','3');
343                                                                                        infobox
344                                                                                                .transition()
345                                                                                                .duration(500)
346                                                                                                        .style("display", 'none');
347                                                                                });
348                                                                        });
349
350                                                        // Ajout du groupe qui contiendra les éléments de la date de naissance
351                                                        ligne_naissance_groupe = svg.select('.paths').append("g")
352                                                                .attr("class", "birth-line");
353       
354                                                        // Ajout de la ligne de naissance
355                                                        ligne_naissance = ligne_naissance_groupe
356                                                                .datum( value_naissance )
357                                                                .append("line")
358                                                                        .attr( 'class', 'ligne_naissance' )
359                                                                        .attr("x1", function( d ) {
360                                                                                return x( d.axe_x );
361                                                                        }).attr("x2",function( d ) {
362                                                                                return x( d.axe_x );
363                                                                        }) // vertical line so same value on each
364                                                                        .attr("y1",100).attr("y2", height);
365       
366                                                        // Ajout du cercle en haut de la ligne de naissance
367                                                        ligne_naissance_groupe
368                                                                .datum(value_naissance)
369                                                                .append("circle")
370                                                                        .attr('class','circle_naissance')
371                                                                        .attr( 'r', 20 )
372                                                                        .attr("cx", function( d ) {
373                                                                                return x( d.axe_x );
374                                                                        })
375                                                                        .attr("cy",40);
376
377                                                        // Ajout du texte "Votre naissance"
378                                                        ligne_naissance_groupe
379                                                                .datum(value_naissance)
380                                                                .append("text")
381                                                                        .attr('class','texte_naissance')
382                                                                        .text('VOTRE NAISSANCE')
383                                                                        .attr("x", function(d){
384                                                                                return x(d.axe_x);
385                                                                        })
386                                                                        .attr("y",80);
387                                                       
388                                                        // Ajout de l'image de la bougie
389                                                        ligne_naissance_groupe
390                                                                .datum(value_naissance)
391                                                                .append("svg:image")
392                                                                        .attr("xlink:href", "[(#CHEMIN{images/bougie.png}|timestamp)]")
393                                                                        .attr("x", function(d){
394                                                                                return x(value_naissance.axe_x)-17;
395                                                                        })
396                                                                        .attr("y", "22")
397                                                                        .attr("width", "35")
398                                                                        .attr("height", "35");
399                                                                       
400                                                       
401                                                        // Ajout du groupe pour Aujourd'hui
402                                                        ligne_aujd_groupe = svg.select('.paths').append("g")
403                                                                .attr("class", "today-line");
404       
405                                                        // Ajout de la ligne d'aujourd'hui
406                                                        ligne_aujd = ligne_aujd_groupe
407                                                                .datum(values[values.length-1])
408                                                                .append("line")
409                                                                        .attr( 'class', 'ligne_aujd' )
410                                                                        .attr("x1", function( d ) {
411                                                                                return x( d.axe_x );
412                                                                        }).attr("x2",function( d ) {
413                                                                                return x( d.axe_x );
414                                                                        }) // vertical line so same value on each
415                                                                        .attr("y1",100).attr("y2", height);
416       
417                                                        // Ajout du cercle en haut de la ligne de naissance
418                                                        ligne_aujd_groupe
419                                                                .datum(values[values.length-1])
420                                                                .append("circle")
421                                                                        .attr('class','circle_aujd_main')
422                                                                        .attr( 'r', 15 )
423                                                                        .attr("cx", function( d ) {
424                                                                                return x( d.axe_x );
425                                                                        })
426                                                                        .attr("cy",40);
427                                                       
428                                                        // Ajout du cercle en haut de la ligne de naissance
429                                                        ligne_aujd_groupe
430                                                                .datum(values[values.length-1])
431                                                                .append("circle")
432                                                                        .attr('class','circle_aujd_small')
433                                                                        .attr( 'r', 6 )
434                                                                        .attr("cx", function( d ) {
435                                                                                return x( d.axe_x );
436                                                                        })
437                                                                        .attr("cy",40);
438                                                        // Ajout du texte "Aujourd'hui"
439                                                        ligne_aujd_groupe
440                                                                .datum(values[values.length-1])
441                                                                .append("text")
442                                                                        .attr('class','texte_aujd')
443                                                                        .text("AUJOURD'HUI")
444                                                                        .attr("x", function(d){
445                                                                                return x(d.axe_x);
446                                                                        })
447                                                                        .attr("y",80);
448                                                       
449                                                }
450
451                                                /**
452                                                 * Afficher le bloc d'interaction
453                                                 */
454                                                function drawlines_interaction(translatex){
455                                                        ligne_interactive_groupe = svg.append("g")
456                                                                .attr("class", "interaction");
457                                                               
458                                                        /**
459                                                         * Ajouter la ligne d'interaction
460                                                         */
461                                                        ligne_interactive =  ligne_interactive_groupe
462                                                                .datum(value_origine)
463                                                                        .append("line")
464                                                                                .attr('class', 'ligne_interactive')
465                                                                                .attr("x1", function(d) {
466                                                                                        return x( d.axe_x )-translatex;
467                                                                                }).attr("x2",function(d) {
468                                                                                        return x(d.axe_x)-translatex;
469                                                                                })
470                                                                .attr("y1",100).attr("y2", height);
471                                                        /**
472                                                         * Ajouter le triangle
473                                                         */
474                                                        ligne_interactive_groupe.append('path')
475                                                                .attr('class','triangle')
476                                                                .attr('d', function(d) { 
477                                                                        var x1 = (x( value_origine.axe_x )-translatex-14), x2 = x( value_origine.axe_x)-translatex+14,x3 = x( value_origine.axe_x )-translatex;
478                                                                        var x4 = 'M '+ x1 +' 390 L '+x2+' 390 L '+x3+' 365 z';
479                                                                        return x4;
480                                                                });
481                                                }
482                                                </script>
483                                </div>
484                                </BOUCLE_jeu_selectionne>
485                                </B_jeu_selectionne>
486                                <B_jeux>
487                                <div class="texte">#TEXTE</div>
488                                <div class="liste_infographies">
489                                <BOUCLE_jeux(INFOGRAPHIES_DATAS spip_infographies_datas_liens){objet=infographie}{id_objet=#ID_INFOGRAPHIE}>
490                                <a href="[(#SELF|parametre_url{donnees,#ID_INFOGRAPHIES_DATA})]">[(#LOGO_INFOGRAPHIES_DATA|image_reduire{300,300})]</a>
491                                </BOUCLE_jeux>
492                                </div>
493                                </B_jeux>
494                                <//B_jeu_selectionne>
495                                <//B_si_naissance_1951>
496                        <//B_si_pas_naissance>
497                </div>
498                </div>
499        </div>
500        [<footer class="footer clearfix">
501                (#CREDITS|image_reduire{100,100})
502        </footer>]
503</div>
504</body>
505</html>
506</BOUCLE_principale>
Note: See TracBrowser for help on using the repository browser.