3.0 KiB
id | title | challengeType | forumTopicId | dashedName |
---|---|---|---|---|
587d7fa8367417b2b2512bcc | Mostrare forme con SVG | 6 | 301485 | display-shapes-with-svg |
--description--
L'ultima sfida ha creato un elemento svg
con una data larghezza e altezza, che era visibile perché aveva un background-color
applicato ad esso nel tag style
. Il codice ha creato uno spazio per la larghezza e l'altezza indicate.
Il passo successivo è quello di creare una forma da inserire nell'area svg
. SVG supporta un certo numero di forme, come rettangoli e cerchi. Vengono utilizzate per visualizzare i dati. Ad esempio, una forma rettangolo SVG (<rect>
) potrebbe creare una barra in un grafico a barre.
Quando metti una forma nell'area svg
, puoi specificare dove va messa utilizzando le coordinate x
e y
. Il punto di origine di (0, 0) è nell'angolo in alto a sinistra. Valori positivi per x
spingeranno la forma verso destra, e valori positivi per y
spingeranno la forma verso il basso dal punto di origine.
Per posizionare una forma al centro dell'area svg
di 500 (larghezza) x 100 (altezza) presa dall'ultima sfida, la coordinata x
sarà 250 e la coordinata y
sarà 50.
Un rect
SVG ha quattro attributi. Ci sono le coordinate x
e y
che indicano dove si trova nell'area svg
. Ha anche un'altezza (height
) e una larghezza (width
) che ne specificano la dimensione.
--instructions--
Aggiungi una forma rect
all'svg
usando append()
, e dalle un attributo width
di 25
e un attributo height
di 100
. Inoltre, dai al rect
gli attributi x
e y
settandoli entrambi a 0
.
--hints--
Il tuo documento dovrebbe avere un elemento rect
.
assert($('rect').length == 1);
L'elemento rect
dovrebbe avere un attributo width
impostato a 25
.
assert($('rect').attr('width') == '25');
L'elemento rect
dovrebbe avere un attributo height
impostato a 100
.
assert($('rect').attr('height') == '100');
L'elemento rect
dovrebbe avere un attributo x
settato a 0
.
assert($('rect').attr('x') == '0');
L'elemento rect
dovrebbe avere un attributo y
settato a 0
.
assert($('rect').attr('y') == '0');
--seed--
--seed-contents--
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
const w = 500;
const h = 100;
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h)
// Add your code below this line
// Add your code above this line
</script>
</body>
--solutions--
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
const w = 500;
const h = 100;
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h)
.append("rect")
.attr("width", 25)
.attr("height", 100)
.attr("x", 0)
.attr("y", 0);
</script>
</body>