Estoy tratando de crear un gráfico de barras simple usando d3.js, pero estoy muy confundido acerca de cómo funciona d3 para atravesar el conjunto de datos.

Tengo un div en mi archivo webpage_123.html como este

 <div> <p class="chart-title">Grade Percentages</p> <svg id="drawing0" class="barchart" /> </div>

Tengo un conjunto de datos en un archivo data_123.js de la siguiente manera

 const grade_percents = { "Project": 35, "Presentation": 5, "Homework": 25, "Midterm": 15, "Final": 20 }

Escribí el código en otro archivo d3_123.js de la siguiente manera

 window.addEventListener('load', function () { createBarChart('drawing0', grade_percents); }); // Create the Bar Chart view // elm - the name of the SVG element housing the view // data - the passed in dataset (the object "grade_percents" in this case) let createBarChart = function(elm, data) { console.log(data); let trans = d3.transition().duration(750); let drawing0 = d3.select(elm); barWidth = 80; let bars = drawing0.selectAll(".bar") .data(data, d => d) .join( enter => enter.append("rect") .attr("class", d => "bar") .attr("x", (d, i) => 5 + i * (barWidth + 10)) .attr("y", (d, i) => value[i] * 10) .attr("width", barWidth) .attr("height", 50) .style("fill", "#00008B") ); };

Después de ejecutar el código, no aparece nada en la página web y tampoco en el elemento svg. Estudié la documentación de d3js en Observable pero no me llevó a ninguna parte.

¿Podría por favor señalar lo que está mal con el código?

¿Y tal vez explicar un poco cómo funcionan d e i en este caso? Estoy muy confundido acerca de estas 2 variables aquí.

¡Muchos gracias!