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

Last change on this file since 7985 was 7985, checked in by kent1, 7 years ago

Afficher la barre "Ajourd'hui"

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