Discussion :

[ypcman]

Bonjour.
je teste l'emploi de D3.
le code suivant fonctionne parfaitement

Code javascript :

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
<div id="graphe_1">
<script type="text/javascript">
var tabval= [
	{"mois":"janvier", "valeur":random_integer(10,30)},
    {"mois":"février", "valeur":random_integer(10,30)},
    {"mois":"mars", "valeur":random_integer(10,30)},
    {"mois":"avril", "valeur":random_integer(10,30)},
    {"mois":"mai", "valeur":random_integer(10,30)},
    {"mois":"juin", "valeur":random_integer(10,30)},
    {"mois":"juillet", "valeur":random_integer(10,30)},
    {"mois":"août", "valeur":random_integer(10,30)},
    {"mois":"septembre", "valeur":random_integer(10,30)},
    {"mois":"octobre", "valeur":random_integer(10,30)},
    {"mois":"novembre", "valeur":random_integer(10,30)},
    {"mois":"décembre", "valeur":random_integer(10,30)}
	];
draw(tabval);
</script>
</div>

et m'affiche, à chaque raffraichissement de la page un graphe avec des valeurs différentes.
En revanche, je ne réussis pas à insérer le svg dans le div graphe_1 comme on le fait avec du html normal en utilsant innerhtml

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('graphe_1').innerHTML ="le svg à insérer ...";

Avez-vous une idée ?

Yves.

[Watilin]

Sans connaître la bibli, je parie qu'elle te renvoie des objets DOM, donc tu peux oublier innerHTML. Essaye avec appendChild.

[NoSmoking]

Bonjour,
je connais de nom, pas de fonctionnalité, mais je pense que draw(tabval) est un peu juste comme fonction d'affichage !

[Watilin]

Bon. J'ai regardé la doc et il se trouve que D3 utilise une technique d'encapsulation similaire à jQuery.

Du coup, je pense que le code devrait ressembler à ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
d3.select("#graphe_1").append(function (d) {
   return … ;
});

Voir la doc.
Sans savoir ce que renvoie ta fonction draw, je peux difficilement en dire plus. Indice : elle doit renvoyer un objet DOM.

[ypcman]

Merci pour les idées. Je teste demain et repost sur le fil