innerhtml pour l'affichage d'un svg généré avec la librairie D3

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

Code:

---

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:

---

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

---

Avez-vous une idée ?

Yves.

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

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

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:

---

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.

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