Changeset 8013


Ignore:
Timestamp:
12/27/13 18:09:53 (6 years ago)
Author:
kent1
Message:

4 éléments au lieu de 6 pour les perspectives, cela permet d'avoir un seul dégradé à la fin

Location:
plugins_spip/terraeco_infographie/trunk
Files:
2 edited

Legend:

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

    r8009 r8013  
    189189
    190190path.area.perspective{
    191         fill:#F5F5F5;
     191        fill:#fff;
    192192}
    193193
     
    458458        margin:1em;
    459459}
     460
     461path.area.perspective1_haute,path.area.perspective2_haute{
     462        fill: url(#gradient_perspective1);
     463}
     464
     465.gradient_perspective1_stop1 { stop-color: #a40000;  }
     466.gradient_perspective1_stop2 { stop-color: #D74B0B; }
  • plugins_spip/terraeco_infographie/trunk/infographie.html

    r8012 r8013  
    101101                                                var containerid='graph1',infobox_class='infobox',
    102102                                                        values = [],values1 = [],values2 = [], values_commentaire= [], value_origine = [], value_actuelle = [],
    103                                                         values_perspective1_haute = [], values_perspective1_basse = [], values_perspective1_mediane = [],
    104                                                         values_perspective2_haute = [], values_perspective2_basse = [], values_perspective2_mediane = [],
     103                                                        values_perspective1_haute = [], values_perspective1_mediane = [], values_perspective_trou = [],
     104                                                        values_perspective2_haute = [], values_perspective2_mediane = [],
    105105                                                        tip,ligne_naissance_groupe,ligne_naissance,ligne_interactive;
    106106                                               
     
    333333                                                                         */
    334334                                                                        if((values[values.length-1].axe_x+1) < row[0]){
    335                                                                                 j =  1;
    336                                                                                 i = row[0] - values[values.length-1].axe_x;
     335                                                                                var j =  1, i = row[0] - values[values.length-1].axe_x;
    337336                                                                                value_haute = values_perspective1_haute[values_perspective1_haute.length-1];
    338                                                                                 value_basse = values_perspective1_basse[values_perspective1_basse.length-1];
    339337                                                                                value_mediane = values_perspective1_mediane[values_perspective1_mediane.length-1];
    340                                                                                 moyenne_haute = (row[3] - value_haute.axe_y)/i;
    341                                                                                 moyenne_basse = (row[1] - value_basse.axe_y1)/i;
    342                                                                                 mediane = (row[2] - value_mediane.axe_y)/i;
     338                                                                                var moyenne_haute = (row[3] - value_haute.axe_y)/i, moyenne_basse = (row[1] - value_haute.axe_y1)/i, mediane = (row[2] - value_mediane.axe_y)/i;
    343339                                                                                while (j<i){
    344                                                                                         new_row_haute = {};
    345                                                                                         new_row_basse = {};
    346                                                                                         new_row_mediane = {};
    347                                                                                         new_row_haute.axe_x = new_row_basse.axe_x = new_row_mediane.axe_x = (parseFloat(values[values.length-1].axe_x)+1);
    348                                                                                         new_row_haute.axe_y = parseFloat(value_haute.axe_y)+(parseFloat(moyenne_haute)*parseInt(j));
    349                                                                                         new_row_basse.axe_y1 = parseFloat(value_basse.axe_y1)+(parseFloat(moyenne_basse)*parseInt(j));
    350                                                                                         new_row_haute.axe_y1 = new_row_basse.axe_y = new_row_mediane.axe_y = parseFloat(value_mediane.axe_y)+(parseFloat(mediane)*parseInt(j));
    351                                                                                         values_perspective1_haute.push(new_row_haute);
    352                                                                                         values.push(new_row_haute);
    353                                                                                         values_perspective1_basse.push(new_row_basse);
     340                                                                                        var axe_x = (parseFloat(values[values.length-1].axe_x)+1)
     341                                                                                        new_row_mediane =       {
     342                                                                                                                                        'axe_x':axe_x,
     343                                                                                                                                        'axe_y':parseFloat(value_mediane.axe_y)+(parseFloat(mediane)*parseInt(j))
     344                                                                                                                                };
     345                                                                                        values_perspective1_haute.push({
     346                                                                                                                                'axe_x':axe_x,
     347                                                                                                                                'axe_y':parseFloat(value_haute.axe_y)+(parseFloat(moyenne_haute)*parseInt(j)),
     348                                                                                                                                'axe_y1':parseFloat(value_haute.axe_y1)+(parseFloat(moyenne_basse)*parseInt(j))
     349                                                                                                                        });
     350                                                                                        values.push(new_row_mediane);
    354351                                                                                        values_perspective1_mediane.push(new_row_mediane);
    355352                                                                                        j++;
    356353                                                                                }
    357354                                                                        }
    358                                                                         new_row_haute = {};
    359                                                                         new_row_basse = {};
    360                                                                         new_row_mediane = {};
    361                                                                         new_row_haute.axe_x = new_row_basse.axe_x = new_row_mediane.axe_x = parseInt(row[0]);
    362                                                                         new_row_haute.axe_y = parseFloat(row[3]);
    363                                                                         new_row_haute.axe_y1 = new_row_basse.axe_y = new_row_mediane.axe_y = parseFloat(row[2]);
    364                                                                         new_row_basse.axe_y1 = parseFloat(row[1]);
    365                                                                         values_perspective1_haute.push(new_row_haute);
    366                                                                         values.push(new_row_haute);
    367                                                                         values_perspective1_basse.push(new_row_basse);
     355                                                                        values_perspective1_haute.push({'axe_x':parseInt(row[0]),'axe_y':parseFloat(row[3]),'axe_y1':parseFloat(row[1])});
     356                                                                        new_row_mediane = {'axe_x':parseInt(row[0]),'axe_y':parseFloat(row[2])};
     357                                                                        values.push(new_row_mediane);
    368358                                                                        values_perspective1_mediane.push(new_row_mediane);
    369359                                                                });
     
    401391                                                                                 * On va remplir les années manquantes
    402392                                                                                 */
    403                                                                                 if((values_perspective2_basse.length > 0) && (values_perspective2_basse[values_perspective2_basse.length-1].axe_x+1) < row[0]){
     393                                                                                if((values_perspective2_haute.length > 0) && (values_perspective2_haute[values_perspective2_haute.length-1].axe_x+1) < row[0]){
    404394                                                                                        j =  1;
    405                                                                                         i = row[0] - values_perspective2_basse[values_perspective2_basse.length-1].axe_x;
     395                                                                                        i = row[0] - values_perspective2_haute[values_perspective2_haute.length-1].axe_x;
    406396                                                                                        var value_haute = values_perspective2_haute[values_perspective2_haute.length-1];
    407                                                                                         var value_basse = values_perspective2_basse[values_perspective2_basse.length-1];
    408397                                                                                        var value_mediane = values_perspective2_mediane[values_perspective2_mediane.length-1];
    409398                                                                                        var moyenne_haute = (row[3] - value_haute.axe_y)/i;
    410                                                                                         var moyenne_basse = (row[1] - value_basse.axe_y1)/i;
     399                                                                                        var moyenne_basse = (row[1] - value_haute.axe_y1)/i;
    411400                                                                                        var mediane = (row[2] - value_mediane.axe_y)/i;
    412401                                                                                        while (j<i){
    413                                                                                                 var new_row_haute = {};
    414                                                                                                 var new_row_basse = {};
    415                                                                                                 var new_row_mediane = {};
    416                                                                                                 new_row_haute.axe_x = new_row_basse.axe_x = new_row_mediane.axe_x = (parseFloat(values_perspective2_basse[values_perspective2_basse.length-1].axe_x)+1);
    417                                                                                                 new_row_haute.axe_y = parseFloat(value_haute.axe_y)+(parseFloat(moyenne_haute)*parseInt(j));
    418                                                                                                 new_row_basse.axe_y1 = parseFloat(value_basse.axe_y1)+(parseFloat(moyenne_basse)*parseInt(j));
    419                                                                                                 new_row_haute.axe_y1 = new_row_basse.axe_y = new_row_mediane.axe_y = parseFloat(value_mediane.axe_y)+(parseFloat(mediane)*parseInt(j));
    420                                                                                                 values_perspective2_haute.push(new_row_haute);
    421                                                                                                 values_perspective2_basse.push(new_row_basse);
    422                                                                                                 values_perspective2_mediane.push(new_row_mediane);
     402                                                                                                var axe_x = (parseFloat(values_perspective2_haute[values_perspective2_haute.length-1].axe_x)+1);
     403                                                                                                values_perspective2_haute.push({
     404                                                                                                        'axe_x':axe_x,
     405                                                                                                        'axe_y':parseFloat(value_haute.axe_y)+(parseFloat(moyenne_haute)*parseInt(j)),
     406                                                                                                        'axe_y1':parseFloat(value_haute.axe_y1)+(parseFloat(moyenne_basse)*parseInt(j))
     407                                                                                                });
     408                                                                                                values_perspective2_mediane.push({
     409                                                                                                        'axe_x':axe_x,
     410                                                                                                        'axe_y':parseFloat(value_mediane.axe_y)+(parseFloat(mediane)*parseInt(j))
     411                                                                                                });
    423412                                                                                                j++;
    424413                                                                                        }
    425414                                                                                }
    426                                                                                 new_row_haute = {};
    427                                                                                 new_row_basse = {};
    428                                                                                 new_row_mediane = {};
    429                                                                                 new_row_haute.axe_x = new_row_basse.axe_x = new_row_mediane.axe_x = parseFloat(row[0]).toFixed();
    430                                                                                 new_row_haute.axe_y = row[3];
    431                                                                                 new_row_haute.axe_y1 = new_row_basse.axe_y = new_row_mediane.axe_y = row[2];
    432                                                                                 new_row_basse.axe_y1 = row[1];
    433                                                                                 values_perspective2_haute.push(new_row_haute);
    434                                                                                 values_perspective2_basse.push(new_row_basse);
    435                                                                                 values_perspective2_mediane.push(new_row_mediane);
     415                                                                                values_perspective2_haute.push({'axe_x': parseFloat(row[0]).toFixed(),'axe_y':row[3],'axe_y1':row[1]});
     416                                                                                values_perspective2_mediane.push({'axe_x': parseFloat(row[0]).toFixed(),'axe_y':row[2]});
    436417                                                                        });
    437418                                                                       
     419                                                                        values_perspective1_haute.forEach(function(row, i){
     420                                                                                if(values_perspective1_haute[i].axe_y1 >= values_perspective2_haute[i].axe_y){
     421                                                                                        values_perspective_trou.push({
     422                                                                                                                                        'axe_x':values_perspective1_haute[i].axe_x,
     423                                                                                                                                        'axe_y':values_perspective1_haute[i].axe_y1,
     424                                                                                                                                        'axe_y1':values_perspective2_haute[i].axe_y
     425                                                                                                                                });
     426                                                                                }
     427                                                                                values_perspective1_haute[i].axe_y1 = values_perspective2_haute[i].axe_y1;
     428                                                                        });
    438429                                                                        /**
    439430                                                                         * On retrace les diagrammes
     
    445436                                                                         * On ajoute les perspectives
    446437                                                                         */
    447                                                                         svg.selectAll('.paths').append("path")
     438                                                                        var perspectives = svg.selectAll('.paths').append("g").attr('class','perspectives');
     439                                                                        perspectives.append("path")
    448440                                                                                .attr("class", "area perspective perspective1_haute")
    449441                                                                                .attr("d", area(values_perspective1_haute));
    450                                                                         svg.selectAll('.paths').append("path")
    451                                                                                 .attr("class", "area perspective perspective1_basse")
    452                                                                                 .attr("d", area(values_perspective1_basse));
    453                                                                         svg.selectAll('.paths').append("path")
    454                                                                                 .attr("class", "area perspective perspective2_haute")
    455                                                                                 .attr("d", area(values_perspective2_haute));
    456                                                                         svg.selectAll('.paths').append("path")
    457                                                                                 .attr("class", "area perspective perspective2_basse")
    458                                                                                 .attr("d", area(values_perspective2_basse));
    459                                                                         svg.selectAll('.paths').append("path")
     442                                                                        perspectives.append("path")
     443                                                                                .attr("class", "area perspective perspective_trou")
     444                                                                                .attr("d", area(values_perspective_trou));
     445                                                                        perspectives.append("path")
     446                                                                                .attr("class", "line perspective perspective1_mediane")
     447                                                                                .attr("d", line(values_perspective1_mediane));
     448                                                                        perspectives.append("path")
    460449                                                                                .attr("class", "line perspective perspective2_mediane")
    461450                                                                                .attr("d", line(values_perspective2_mediane));
    462                                                                         svg.selectAll('.paths').append("path")
    463                                                                                 .attr("class", "line perspective perspective1_mediane")
    464                                                                                 .attr("d", line(values_perspective1_mediane));
    465                                                                        
     451
    466452                                                                        [(#SET{image_demain,[(#CHEMIN{images/demain_[(#CSS_CLASS).png]}|balise_img)]})]
    467453                                                                        // Ajout du groupe pour Aujourd'hui
     
    635621
    636622                                                var paths = svg.append("g").attr("class", "paths")
    637                                                        
     623                                               
     624                                                var defs = svg.append('defs');
     625                                                var gradient_perspective1 = defs.append( 'linearGradient' )
     626                                                                        .attr( 'id', 'gradient_perspective1' )
     627                                                                        .attr( 'x1', '0' )
     628                                                                        .attr( 'x2', '0' )
     629                                                                        .attr( 'y1', '0' )
     630                                                                        .attr( 'y2', '1' );
     631
     632                                                gradient_perspective1.append( 'stop' )
     633                                                        .attr( 'class', 'gradient_perspective1_stop1' )
     634                                                        .attr( 'offset', '0%' );
     635
     636                                                gradient_perspective1.append( 'stop' )
     637                                                        .attr( 'class', 'gradient_perspective1_stop2')
     638                                                        .attr( 'offset', '100%' );
     639                                               
    638640                                                // Ajouter le tooltip que l'on cache automatiquement
    639641                                                tip = d3.select('#'+containerid).append("div")
     
    934936
    935937                                                        // On enlÚve les ticks de l'axe y trop haut
    936                                                         jQuery('.y .tick text').each(function(){
     938                                                        jQuery('.y .tick text').each(function(i){
    937939                                                                if(parseFloat(jQuery(this).text()) > ymax_origine)
    938940                                                                        jQuery(this).parent().remove();
Note: See TracChangeset for help on using the changeset viewer.