Discussion :

[Mopige]

Bonjour,

J'ai tracé le graphique présenté en pièce jointe en utilisant la bibliothèque d3.js. Ce graphique contient une courbe, 2 axes avec leur libellé et 2 lignes verticales. Je souhaite :

1/ mettre en gris la zone sous la courbe limitée à gauche par la ligne verticale. Comment sélectionner cette zone pour pouvoir utiliser la propriété fill uniquement sur la zone à droite de la courbe.

2/jouter un texte le long de la ligne verticale centrale. Comment faire? Est-ce que je dois créer un objet texte ou bien puis-je insérer un texte dans la ligne verticale avec .append("text") comme pour les axes.

Merci pour votre aide

[danielhagnoul]

Bonsoir

Votre question m'a fait découvrir l'existence et les possibilités de d3.

Je viens, à l'instant, de trouver un article intéressant : http://www.d3noob.org/2013/01/fillin...der-graph.html.

Pour votre problème, il faut sans doute limiter la valeur de x dans :

Code :

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

1
2
3
4
var area = d3.svg.area()
    .x(function(d) { return x(d.date); })
    .y0(height)
    .y1(function(d) { return y(d.close); });

Je compte bien tester l'article dès que j'aurais un peu de temps disponible. Si vous trouvez une solution, merci de m'en faire part en postant ci-dessous.