Soy un novato con d3 JS y estaba en mi primer intento de dibujar un gráfico con d3. Tengo el siguiente HTML y JS.
<!DOCTYPE html> <html lang="en"> <head> <title>D3 JS</title> <style> .container{ width: 300px; height: 260px; } .bar{ background-color: aquamarine; display: flex; justify-content: space-around; } </style> </style> <script src="https://d3js.org/d3.v7.min.js"></script> <script src="app.js"> </script> </head> <body> <div></div> </body> const DUMMY_DATA = [ { id: "d1", value: 10, region: "India" }, { id: "d2", value: 15, region: "Germany" }, { id: "d3", value: 12, region: "UK" }, { id: "d4", value: 8, region: "Netherlands" }, { id: "d5", value: 19, region: "Norway" }, ]; const container = d3 .select("div") .classed("container", true) .style("border", "2px solid red"); const bars = container .selectAll(".bar") .data(DUMMY_DATA) .enter() .append("div") .classed("bar", true) .style("width", "30px") .style("height", ((data) => data.value * 10) + "px");Estoy tratando de dibujar un gráfico de barras simple y no tengo ningún error en la consola. pero la clase que estoy tratando de agregar al div no se agrega en el DOM y, por lo tanto, el resto no se está trazando. ¿Alguien puede decirme qué está mal aquí?
Tu problema de altura es tu paréntesis. Pero aún no tiene un gráfico adecuado de lo contrario:
.style("height", (data) => data.value * 10 + "px")