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

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

graph_replace devient plus générique (on peut l'appeler d'où on souhaite)

On enlève également des dates en dur

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