D3.js tutoriel - Partie 6 - Formes élémentaires

Partie 5 Sommaire Partie 7

Pour dessiner une forme, ajoutez simplement une nouvelle balise dans le conteneur SVG et spécifiez les propriétés de la forme dans les attributs. Comme la syntaxe pour dessiner des formes est toujours la même, nous ne détaillerons pas chaque primitive. Nous allons simplement fournir un exemple (code source et exemple en ligne) pour chaque forme. Grâce à ces exemples, vous comprendrez facilement le fonctionnement de chaque forme.

Cercle

//Draw the Circle
var circle = svg.append("circle")
                .attr("cx", 150)
                .attr("cy", 30)
                .attr("r", 20);

Éllipse

var circle = svg.append("ellipse")
                .attr("cx", 150)
                .attr("cy", 100)
                .attr("rx", 20)
                .attr("ry", 60);

Rectangle

var rectangle = svg.append("rect")
                    .attr("x", 10)
                    .attr("y", 40)
                    .attr("width", 50)
                    .attr("height", 100);

Ligne (ou segment)

var circle = svg.append("line")
                .attr("x1", 5)
                .attr("y1", 5)
                .attr("x2", 100)
                .attr("y2", 50)
                .attr("stroke-width", 2)
                .attr("stroke", "black");

Texte

var circle = svg.append('text')
                .attr('x', 100)
                .attr('y', 50)
                .text("I'm a text with D3.js");

Ligne polygonale

var circle = svg.append('polyline')
                .attr('points', "50,50 100,50 100,100 150,100 200,150 250 150")
                .attr('fill', "none")
                .attr('stroke', 'blue');

Polygone

var circle = svg.append('polygon')
                .attr('points', "50,50 200,50 250,100 250,150 20,50")
                .attr('stroke', '#f00')
                .attr('fill', 'none');

Polygone plein

var circle = svg.append('polygon')
                .attr('points', "50,50 200,50 250,100 250,150 20,50")
                .attr('fill', 'green');

Partie 5 Sommaire Partie 7

Voir aussi

Dernière mise à jour : 28/01/2020