freeCodeCamp

3.6 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d7fa8367417b2b2512bcc	Display Shapes with SVG	6		Mostrar formas con SVG

Description

El último desafío creó un elemento 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

Agregue una forma 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

3.6 KiB Raw Blame History