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:

---

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:

---

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.

Bonjour,

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

Bonjour...


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

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.

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

Bonjour,

Citation:

---

on a cette erreur : « Uncaught TypeError: t.getFullYear is not a function »

---

quelle version du module D3JS utilises tu ?

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:

---

1 2	xScale = d3.time.scale() .range([0, width]);

---

...puis :

Code:

---

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:

---

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 ?