使用数组数据绘制D3.js柱状图无显示问题求助

你的代码存在三个核心问题，导致柱状图无显示且无报错，逐个解决即可：

1. 日期数据类型不匹配 #

你使用d3.scaleUtc()（UTC时间比例尺）作为x轴，但数据中的year是字符串格式（如'2017'），UTC比例尺无法识别字符串类型的日期，必须将其转换为Date对象：

// 预处理数据：将year转为Date对象，percent转为数值类型
const processedData = arrMMR.map(d => ({
  year: new Date(`${d.year}-01-01`),
  percent: parseFloat(d.percent)
}));

后续绑定数据时使用处理后的processedData数组。

2. 百分比数据类型错误 #

数据中的percent是字符串（如'1.00'），而d3.scaleLinear()（线性比例尺）仅支持数值类型输入，直接传入字符串会导致比例尺计算失效，上述预处理代码已同步将percent转为浮点数。

3. 柱子尺寸计算错误 #

• 宽度：你写的x.barWidth是错误用法，x是比例尺对象，没有barWidth属性，应直接使用你之前定义好的barWidth变量。
• 高度：原代码height - y(d.percent)会将柱子绘制到SVG可视区域之外（因为y轴的range是从下往上映射），正确计算应为y轴零点位置减去柱子顶部的y坐标，即y(0) - y(d.percent)（等价于height - marginBottom - y(d.percent)，因为y(0)的取值就是height - marginBottom）。

修复后的核心代码片段 #

将绑定柱子的代码替换为以下内容：

// 先预处理数据
const processedData = arrMMR.map(d => ({
  year: new Date(`${d.year}-01-01`),
  percent: parseFloat(d.percent)
}));

svg.selectAll("mybar")
  .data(processedData)
  .enter()
  .append("rect")
    .attr("x", function(d) { return x(d.year); })
    .attr("y", function(d) { return y(d.percent); })
    .attr("width", barWidth)
    .attr("height", function(d) { return y(0) - y(d.percent); })
    .attr("fill", "#69b3a2")

注：数据中缺失2020年的条目，图表会自动留空，属于正常现象。

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