d3.js遍历数据集绘制柱状图无输出问题及d、i参数用法咨询

• 问题1：d3.select() 选择id元素时未加#前缀
  你传入的参数是字符串'drawing0'，d3会默认查找标签名为drawing0的元素，而非id为drawing0的svg，需要改为d3.select('#' + elm)
• 问题2：data()方法仅接收数组类型的数据集，你传入的是普通对象
  需要先把grade_percents对象转为键值对数组，比如用Object.entries(data)处理后再传给data()
• 问题3：未定义value变量，y属性的赋值逻辑出错
  你没有声明过value变量，直接调用value[i]会报错，可直接从遍历到的元素中取百分比数值
• 问题4：svg未设置宽高属性
  你页面中的svg没有定义宽高，就算生成了rect元素也会因为画布尺寸不足被裁剪，需要先给svg设置足够的宽高，比如宽度设置为5*(80+10) + 10 = 460，高度设置为400即可
• 问题5：data()的key函数使用错误
  你现在写的d => d作为key函数，在数据为对象时无法正确匹配，转数组后可调整为取键名作为唯一标识

• d：是当前遍历到的数组元素，在你把数据转成[["Project",35],["Presentation",5],...]这类键值对数组后，每一轮遍历的d就对应数组里的一个子项，比如第一轮的d就是["Project",35]，你可以用d[0]取分类名，d[1]取百分比数值
• i：是当前遍历元素在数组中的索引，从0开始计数，比如第一个元素的i是0，第二个是1，以此类推，你计算x坐标的时候用i乘以每个柱子的宽度加间距的逻辑是正确的

let createBarChart = function(elm, data) {
    // 把对象转成键值对数组
    const dataArr = Object.entries(data);
    let drawing0 = d3.select('#' + elm)
        // 给svg设置宽高
        .attr('width', 460)
        .attr('height', 400);

    const barWidth = 80;
    const svgHeight = 400;

    let bars = drawing0.selectAll(".bar")
        // 传入数组格式数据，key取分类名作为唯一标识
        .data(dataArr, d => d[0])
        .join(
        enter => enter.append("rect")
            .attr("class", "bar")
            .attr("x", (d, i) => 5 + i * (barWidth + 10))
            // y坐标是svg高度减去柱子高度，因为svg的y轴原点在左上角
            .attr("y", (d, i) => svgHeight - d[1] * 10)
            .attr("width", barWidth)
            // 高度用百分比值计算
            .attr("height", d => d[1] * 10)
            .style("fill", "#00008B")
        );
};

内容的提问来源于stack exchange，提问作者Crysishy