Code-source


00001     //   # (gH)   -_-  paysUE_tableau.js  ;  TimeStamp (unix) : 29 Décembre 2015 vers 22:45     

00002          

00003     // initialisation des variables     

00004          

00005     var dataset = [] ;     

00006     var nomsCol = [] ;     

00007     var aligne  = [] ;     

00008     var nbc     = -1 ;     

00009     var nbPays  = -1 ;     

00010          

00011     // création du titre de niveau 2     

00012          

00013     d3.select("#hautDePage")     

00014       .append("h2").text("Tableau des populations et des superficies")     

00015          

00016     // un peu de décalage ne fait pas de mal     

00017          

00018     d3.select("#hautDePage")     

00019       .append("blockquote")     

00020       .attr("id","avantTabUE")     

00021          

00022     // création du tableau...     

00023          

00024     d3.select("#avantTabUE")     

00025       .append("table")     

00026       .attr("id","tabUE")     

00027       .attr("border",1)     

00028       .attr("cellpadding",15)     

00029       .style("border-collapse","collapse")     

00030          

00031     // de la partie entete     

00032          

00033     d3.select("#tabUE")     

00034       .append("thead")     

00035       .append("tr")     

00036       .attr("id","headerUE")     

00037          

00038     // et du corps du tableau     

00039          

00040     d3.select("#tabUE")     

00041       .append("tbody")     

00042       .attr("id","bodyTabUE")     

00043          

00044     // chargement du fichier et remplissage du tableau     

00045     // ligne par ligne     

00046          

00047     d3.csv("paysUEjs.csv", function(error,data) {     

00048          

00049       dataset = data;     

00050       nbPays  = dataset.length ;     

00051          

00052       // gestion des entetes de colonne     

00053          

00054       d3.select("#headerUE")     

00055         .append("th")     

00056         .text("Numéro") ;     

00057          

00058       (Object.keys(data[0])).forEach(function(nom) {     

00059           nbc = nbc + 1 ;     

00060           nomsCol[nbc] = nom ;     

00061           if (nbc<=0) {     

00062             aligne[nbc] = "left" ;     

00063           } else {     

00064             aligne[nbc] = "right" ;     

00065           } ; // fin si     

00066           d3.select("#headerUE")     

00067             .append("th")     

00068             .text(nom)     

00069       }); // fin de pour chaque nom de colonne     

00070          

00071       // remplissage du tableau     

00072          

00073       for (numPays=0;numPays<dataset.length;numPays=numPays+1) {     

00074          

00075          var pays = dataset[numPays] ;     

00076          

00077          d3.select("#bodyTabUE")     

00078            .append("tr")     

00079            .attr("id","ligneInd"+numPays)     

00080            .append("td")     

00081            .text(numPays+1)     

00082            .style("text-align","right") ;     

00083          

00084          for (numCol=0;numCol<=nbc;numCol=numCol+1) {     

00085             d3.select("#ligneInd"+numPays)     

00086               .append("td")     

00087               .text(pays[nomsCol[numCol]])     

00088               .style("text-align",aligne[numCol]) ;     

00089          } ; // fin pour numCol     

00090          

00091       } ; // fin pour numPays     

00092          

00093     // pour finir, on rend les colonnes triables     

00094          

00095     d3.select("#tabUE").attr("class","sortable")     

00096          

00097     });
Listing du fichier paysUE_tableau.js
