3.7 KiB
3.7 KiB
id | title | required | challengeType | videoUrl | localeTitle | |||
---|---|---|---|---|---|---|---|---|
587d7fa8367417b2b2512bcc | Display Shapes with SVG |
|
6 | Mostrar formas con SVG |
Description
svg
con un ancho y alto dado, que era visible porque tenía un background-color
aplicado en la etiqueta de style
. El código hizo espacio para el ancho y alto dado. El siguiente paso es crear una forma para colocar en el área de svg
. Hay una serie de formas compatibles en SVG, como rectángulos y círculos. Se utilizan para mostrar datos. Por ejemplo, una forma SVG rectangular ( <rect>
) podría crear una barra en un gráfico de barras. Cuando coloca una forma en el área de svg
, puede especificar a dónde va con las coordenadas x
e y
. El punto de origen de (0, 0) está en la esquina superior izquierda. Los valores positivos para x
empujan la forma hacia la derecha, y los valores positivos para y
empujan la forma hacia abajo desde el punto de origen. Para colocar una forma en el medio del svg
500 (ancho) x 100 (altura) del último desafío, la coordenada x
sería 250 y la coordenada y
sería 50. Un rect
SVG tiene cuatro atributos. Existen las coordenadas x
e y
donde se coloca en el área de svg
. También tiene una height
y width
para especificar el tamaño. Instructions
rect
a la svg
usando append()
, y asigne un atributo de width
de 25 y un atributo de height
de 100. Además, rect
atributos rect
x
e y
cada conjunto a 0. Tests
tests:
- text: Su documento debe tener 1 elemento <code>rect</code> .
testString: 'assert($("rect").length == 1, "Your document should have 1 <code>rect</code> element.");'
- text: El elemento <code>rect</code> debe tener un atributo de <code>width</code> establecido en 25.
testString: 'assert($("rect").attr("width") == "25", "The <code>rect</code> element should have a <code>width</code> attribute set to 25.");'
- text: El elemento <code>rect</code> debe tener un atributo de <code>height</code> establecido en 100.
testString: 'assert($("rect").attr("height") == "100", "The <code>rect</code> element should have a <code>height</code> attribute set to 100.");'
- text: El elemento <code>rect</code> debe tener un atributo <code>x</code> establecido en 0.
testString: 'assert($("rect").attr("x") == "0", "The <code>rect</code> element should have an <code>x</code> attribute set to 0.");'
- text: El elemento <code>rect</code> debe tener un atributo <code>y</code> establecido en 0.
testString: 'assert($("rect").attr("y") == "0", "The <code>rect</code> element should have a <code>y</code> attribute set to 0.");'
Challenge Seed
<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>
Solution
// solution required