javascript - d3如何遍历数据

Question

我正在尝试使用 d3.js 创建一个简单的条形图，但我对 d3 如何遍历数据集感到非常困惑。

我的webpage_123.html 文件中有一个这样的div

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

我在 data_123.js 文件中有一个数据集，如下所示

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

我将代码写在另一个 d3_123.js 文件中，如下所示

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")
    );
};

运行代码后，网页上没有显示任何内容，svg 元素中也没有显示任何内容。我研究了 Observable 上的 d3js 文档，但没有得到任何帮助。

你能指出代码有什么问题吗？

也许解释一下 d 和 i 在这种情况下是如何工作的？我在这里对这两个变量感到非常困惑。

非常感谢！

标签： javascripthtmlsvgd3.jsdata-visualization