IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Formatage de graphes


Sujet :

JavaScript

  1. #1
    Membre à l'essai
    Homme Profil pro
    Non-informaticien
    Inscrit en
    Août 2013
    Messages
    37
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Non-informaticien

    Informations forums :
    Inscription : Août 2013
    Messages : 37
    Points : 17
    Points
    17
    Par défaut Formatage de graphes
    Bonjour à tous,

    Je voudrais poser une question sur un problème que j’espère être simple.

    Je précise que je code surtout en Python, je ne comprends pas vraiment JavaScript.

    Mon projet :

    J’ai créé une interface pour une application consacrée aux Présidentielles 2017, pour permettre aux gens de faire des recherches complexes sur une base d’articles de presse relatifs à un certain nombre de candidats, de partis, de familles politiques, de médias, et de thèmes politiques.

    L’interface se trouve là : http://www.base-presidentielles2017.fr .

    Son maniement est assez simple :
    - choisissez un, zéro ou plusieurs candidats,
    - un, zéro ou plusieurs partis,
    - un, zéro ou plusieurs camps politiques,
    - et de même pour les thèmes ou médias,
    - délimitez les dates de votre recherche (la période maximale va du 01/01/2016 au 30/06/2017),
    - ajoutez éventuellement une question en langage naturel (en essayant d’orthographier correctement…),
    - et cliquez sur « interroger ».
    (Par exemple, testez : candidat « François Fillon » et thème « économie » - normalement, cela marche en moins de 10 secondes)
    Vous voyez alors plusieurs cadres apparaître sous le bouton « Interroger », un pour récapituler la question, un autre pour décrire les classes d’articles trouvés rassemblés selon les critères de choix, avec des citations censées être les plus pertinentes pour chaque classe.

    Et, en-dessous, un graphique à bulle, bulles relatives à des articles. Chaque bulle a pour abscisse la date de parution de l’article, et pour ordonnée le numéro de sa classe de critères de choix. Un clic sur chaque bulle déclenche un scroll vers des extraits de l’article, extraits qui sont listés sous le graphe.

    Mon problème :

    Vous voyez les axes du graphe. Celui des abscisses devrait afficher des dates, allant au maximum du 1er janvier 2016 au 30 juin 2017. Or, on voit seulement des nombres, compris entre 0 et 567, qui correspondent au nombre de jour entre ces deux dates extrêmes.
    Quant à l’axe des ordonnées, il ne devrait afficher que des nombres entiers, puisque ce sont des numéros de classe.
    Je n’ai pas réussi cette mise en forme. Je vous précise que le fichier .js qui décrit la page d’interface utilise jquery.js et d3.js.

    Voici l’extrait de code qui décrit les axes :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    			var xScale, yScale, colors, ScoreScale, xAxis, yAxis;
    			var yyyymmdd = d3.time.format('%Y-%m-%d'); //format date 
    svg = svg.append('g')
    						.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
     
    					background = svg.append('rect')
    						.attr('x', 0)
    						.attr('y', 0)
    						.attr('width', width) // width est la largeur du graphe…
    						.attr('height', height)  // …et height sa hauteur.
    						.style('fill', '#fff');
     
     
    					//format
     
    					xScale = d3.scale.linear() // axe des X
    						.range([0, width]);
     
    					yScale = d3.scale.linear() // axe des Y
    						.range([height, 0]);
     
    					ScoreScale = d3.scale.sqrt()
    						.range([0, CONFIG.maxRadius]);
     
    					xAxis = d3.svg.axis()
    						.scale(xScale)
    						.orient('bottom');
     
    					yAxis = d3.svg.axis()
    						.scale(yScale)
    						.orient('left');
     
    					svg.append('g')
    						.attr('class', 'x axis')
    						.attr('transform', 'translate(0, ' + height + ')')
    						.append('text')
    						.attr('transform', 'translate(' + (width / 2) + ', 0)')
    						.attr('class', 'IDF-axisLabel') //Mise en forme (police des caractères) des libellés des graphes
    						.attr('x', 0)
    						.attr('y', 40)
    						.style('text-anchor', 'middle')
    						.text(PARAM.titreaxeabscisse); //inscription du titre de l’axe
     
    					// y axis
    					svg.append('g')
    						.attr('class', 'y axis')
    						.append('text')
    						.attr('class', 'IDF-axisLabel') //Mise en forme (police des caractères) des libellés des graphes
    						.attr('transform', 'rotate(90) translate(' + (height / 2) + ' 0)')
    						.attr('x', 0)
    						.attr('y', 40)
    						.style('text-anchor', 'middle')
    						.text(PARAM.titreaxeordonnee); //inscription du titre de l’axe
    J’ai essayé de corriger le problème en prenant le formatDate et le yyyymmdd pour formater xaxis :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    xAxis = d3.svg.axis()
    	.scale(xScale)
    	.orient('bottom')
    	.tickFormat(yyyymmdd);
    Problème : sur Chrome, cela ne fonctionne pas, en inspectant, on a cette erreur : « Uncaught TypeError: t.getFullYear is not a function » (getFullYear est une fonction qui devrait être trouvée dans le module d3.js).

    Pour ce qui est de l'axe des ordonnées (yaxis), je voudrais simplement arrondir chaque valeur d'étiquette de l'axe à sa valeur entière inférieure ou égale.

    Donc, en clair, avez-vous une idée sur la façon dont je pourrais formater ces axes ?

    Merci d'avance en tout cas.

  2. #2
    Membre confirmé
    Homme Profil pro
    Analyse système
    Inscrit en
    Mai 2014
    Messages
    388
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Arménie

    Informations professionnelles :
    Activité : Analyse système
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Mai 2014
    Messages : 388
    Points : 578
    Points
    578
    Par défaut
    Bonjour,

    Les balises <FRAME ... > et <FRAMESET ... > sont toujours d'actualité? Dans mes souvenirs, elles ne sont plus reconnues par... Chrome.

  3. #3
    Membre à l'essai
    Homme Profil pro
    Non-informaticien
    Inscrit en
    Août 2013
    Messages
    37
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Non-informaticien

    Informations forums :
    Inscription : Août 2013
    Messages : 37
    Points : 17
    Points
    17
    Par défaut
    Bonjour...


    ...excusez-moi, je ne vois pas le rapport entre votre réponse et ma question...

  4. #4
    Membre confirmé
    Homme Profil pro
    Analyse système
    Inscrit en
    Mai 2014
    Messages
    388
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Arménie

    Informations professionnelles :
    Activité : Analyse système
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Mai 2014
    Messages : 388
    Points : 578
    Points
    578
    Par défaut
    Rebonjour,

    Votre site http://www.base-presidentielles2017.fr/ utilise ces balises. Elles sont, peut-être, la raison de votre problème. Vous pourriez modifier votre site en supprimant ces balises, pour voir ce que cela donne.

  5. #5
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Points : 22 933
    Points
    22 933
    Billets dans le blog
    125
    Par défaut
    Sauf erreur de ma part, vous obtenez des nombres au lieu des dates parce que votre code d3 n'est pas correct.

    Voir les exemples de base avec l'axe des X contenant des dates :
    1. http://bl.ocks.org/d3noob/b3ff6ae1c120eea654b5
    2. http://bl.ocks.org/phoebebright/3059392

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    Bonjour,
    on a cette erreur : « Uncaught TypeError: t.getFullYear is not a function »
    quelle version du module D3JS utilises tu ?

  7. #7
    Membre à l'essai
    Homme Profil pro
    Non-informaticien
    Inscrit en
    Août 2013
    Messages
    37
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Non-informaticien

    Informations forums :
    Inscription : Août 2013
    Messages : 37
    Points : 17
    Points
    17
    Par défaut
    Bonsoir,

    merci à tous pour vos interventions, et merci à NoSmoking pour l'avertissement et la mise en forme des extraits de code.

    J'utilise la version 3.0.1 de d3.js, d'après ce qui est écrit dans le fichier.

    Les liens envoyés par danielhagnoul ont été très utiles.

    J'ai résolu mon problème sur l'axe des abscisses en l'écrivant ainsi :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    xScale = d3.time.scale()
    		.range([0, width]);
    ...puis :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     ;
    							var startDate = new Date (2016,0,1);
     
    							var preDate2=extentX[1] + CONFIG.xPadding;
     
    							xScale.domain([startDate, endDate]);
    Les limites de l'axe sont fixes, mais cela me va. Par contre, si je pouvais avoir les dates en français, ça serait mieux, même si non indispensable. Savez-vous comment faire ?

    Pour l'axe des ordonnées, j'ai écrit :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    		yAxis = d3.svg.axis()
    			.scale(yScale)
    			.orient('left')
                            .ticks(0);
    ...et j'obtiens l'effacement complet des libellés sur l'axe des ordonnées. Pas idéal, mais ça ne serait pas un problème. Y a-t-il une solution avec l'option .ticks() pour n'avoir que des valeurs entières ?

Discussions similaires

  1. Classe pour la création d'un graphe xy
    Par Bob dans le forum MFC
    Réponses: 24
    Dernier message: 03/12/2009, 18h20
  2. Pb de formatage de champs de type float
    Par FrankyNormand dans le forum XMLRAD
    Réponses: 9
    Dernier message: 05/05/2005, 13h37
  3. [] [Excel] Exporter un graphe MSChart vers Excel
    Par Gonzo dans le forum Macros et VBA Excel
    Réponses: 4
    Dernier message: 18/12/2002, 18h49
  4. Concerne les graphes
    Par mcr dans le forum Algorithmes et structures de données
    Réponses: 10
    Dernier message: 12/11/2002, 12h02
  5. pb formatage document XML généré par un dom tree
    Par lionel69 dans le forum APIs
    Réponses: 11
    Dernier message: 17/10/2002, 10h53

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo