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 :
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
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 laxe // 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 laxe
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).
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4 xAxis = d3.svg.axis() .scale(xScale) .orient('bottom') .tickFormat(yyyymmdd);
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.
Partager