5.2 KiB
5.2 KiB
id | title | required | challengeType | videoUrl | localeTitle | |||
---|---|---|---|---|---|---|---|---|
587d7fa8367417b2b2512bca | Change the Presentation of a Bar Chart |
|
6 | Cambiar la presentación de un gráfico de barras |
Description
bar
2) Aumentar la altura de las barras para mostrar mejor la diferencia en los valores, lo cual se hace multiplicando el valor por un número para escalar la altura Instructions
margin
de 2px a la clase de bar
en la etiqueta de style
. A continuación, cambie la función de devolución de llamada en el método style()
para que devuelva un valor 10 veces el valor de los datos originales (más el "px"). Nota Multiplicar cada punto de datos por la misma constante solo altera la escala. Es como acercarse y no cambia el significado de los datos subyacentes.
Tests
tests:
- text: El primer <code>div</code> debe tener una <code>height</code> de 120 píxeles y un <code>margin</code> de 2 píxeles.
testString: 'assert($("div").eq(0).css("height") == "120px" && $("div").eq(0).css("margin-right") == "2px", "The first <code>div</code> should have a <code>height</code> of 120 pixels and a <code>margin</code> of 2 pixels.");'
- text: El segundo <code>div</code> debe tener una <code>height</code> de 310 píxeles y un <code>margin</code> de 2 píxeles.
testString: 'assert($("div").eq(1).css("height") == "310px" && $("div").eq(1).css("margin-right") == "2px", "The second <code>div</code> should have a <code>height</code> of 310 pixels and a <code>margin</code> of 2 pixels.");'
- text: El tercer <code>div</code> debe tener una <code>height</code> de 220 píxeles y un <code>margin</code> de 2 píxeles.
testString: 'assert($("div").eq(2).css("height") == "220px" && $("div").eq(2).css("margin-right") == "2px", "The third <code>div</code> should have a <code>height</code> of 220 pixels and a <code>margin</code> of 2 pixels.");'
- text: El cuarto <code>div</code> debe tener una <code>height</code> de 170 píxeles y un <code>margin</code> de 2 píxeles.
testString: 'assert($("div").eq(3).css("height") == "170px" && $("div").eq(3).css("margin-right") == "2px", "The fourth <code>div</code> should have a <code>height</code> of 170 pixels and a <code>margin</code> of 2 pixels.");'
- text: El quinto <code>div</code> debe tener una <code>height</code> de 250 píxeles y un <code>margin</code> de 2 píxeles.
testString: 'assert($("div").eq(4).css("height") == "250px" && $("div").eq(4).css("margin-right") == "2px", "The fifth <code>div</code> should have a <code>height</code> of 250 pixels and a <code>margin</code> of 2 pixels.");'
- text: El sexto <code>div</code> debe tener una <code>height</code> de 180 píxeles y un <code>margin</code> de 2 píxeles.
testString: 'assert($("div").eq(5).css("height") == "180px" && $("div").eq(5).css("margin-right") == "2px", "The sixth <code>div</code> should have a <code>height</code> of 180 pixels and a <code>margin</code> of 2 pixels.");'
- text: El séptimo <code>div</code> debe tener una <code>height</code> de 290 píxeles y un <code>margin</code> de 2 píxeles.
testString: 'assert($("div").eq(6).css("height") == "290px" && $("div").eq(6).css("margin-right") == "2px", "The seventh <code>div</code> should have a <code>height</code> of 290 pixels and a <code>margin</code> of 2 pixels.");'
- text: El octavo <code>div</code> debe tener una <code>height</code> de 140 píxeles y un <code>margin</code> de 2 píxeles.
testString: 'assert($("div").eq(7).css("height") == "140px" && $("div").eq(7).css("margin-right") == "2px", "The eighth <code>div</code> should have a <code>height</code> of 140 pixels and a <code>margin</code> of 2 pixels.");'
- text: El noveno <code>div</code> debe tener una <code>height</code> de 90 píxeles y un <code>margin</code> de 2 píxeles.
testString: 'assert($("div").eq(8).css("height") == "90px" && $("div").eq(8).css("margin-right") == "2px", "The ninth <code>div</code> should have a <code>height</code> of 90 pixels and a <code>margin</code> of 2 pixels.");'
Challenge Seed
<style>
.bar {
width: 25px;
height: 100px;
/* Add your code below this line */
/* Add your code above this line */
display: inline-block;
background-color: blue;
}
</style>
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
d3.select("body").selectAll("div")
.data(dataset)
.enter()
.append("div")
.attr("class", "bar")
// Add your code below this line
.style("height", (d) => (d + "px"))
// Add your code above this line
</script>
</body>
Solution
// solution required