javascript - librería - Gráfico de barras D3 que no muestra el primer elemento en matriz
graficos con d3 js (1)
Estoy trabajando en el primer conjunto de tutoriales D3 (que se encuentra aquí ) y me he encontrado con un problema donde el primer elemento de la matriz de datos no aparece. El borde que he colocado en cada elemento de div de datos indica que, esencialmente, esa primera entrada se ha "colapsado" en una línea en la parte superior. ¿Hay una explicación de por qué está sucediendo esto? ¿Cómo puedo arreglar esto?
Mi HTML, CSS y JS se han puesto en el codepen para ver y editar.
¡Gracias por adelantado!
JS aislado:
var data = [10, 23, 14, 5, 6, 6, 6, 22, 17 ];
d3.select(".project")
.selectAll(".project__bar-chart")
.data(data)
.enter()
.append("div")
.attr("class", "project__bar-chart")
.style("width", function(d) {return d + "rem";})
.text(function(d) {return d;})
Tienes esto en tu HTML:
<div class="project">
<div class="project__bar-chart"></div>
</div>
Por lo tanto, cuando lo haces:
d3.select(".project").selectAll(".project__bar-chart")
Está seleccionando un <div> previamente existente en su selectAll , y su selección "enter" tendrá un elemento menos.
Solución: elimine el div con clase project__bar-chart :
<div class="project">
//look Ma, no div
</div>
Aquí está tu Pen: https://codepen.io/anon/pen/bgKxXG?editors=1010
Y aquí hay un fragmento de Stack:
var data = [10, 23, 14, 5, 6, 6, 6, 22, 17 ]; //The data that we''re working with
d3.select(".project") //bring our focus to the container containing this class
.selectAll(".project__bar-chart")
.data(data) //the data is in line 1
.enter()
.append("div") // Shove the data (defined in line 1) into the Div in the HTML
.attr("class", "project__bar-chart")
.style("width", function(d) {return d + "rem";})
//we''re inserting a function in this style attribute to make sure that the width of the div reflects the value given.
.text(function(d) {return d;}) //this is what it will look like
.project {
color: black;
font: 1rem;
font-family: sans-serif;
margin: .1rem:;
text-align: right;
}
.project__bar-chart {
background: #be3c3c;
border: 1px solid #802828
}
<head>
<script src="https://d3js.org/d3.v4.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div class="project">
</div>