D3 Stacked Bar Chart 条形无法渲染问题排查求助

问题根因 #

你当前的代码核心错误是误用时间解析器处理分类文本字段，原示例的x轴是年份类时间数据，而你自定义的数据x轴是「Knowledge/Comprehension」这类分类文本，强行用d3.time.format("%Y").parse解析会返回空值，导致x轴坐标、条形位置全部计算错误，自然无法渲染。

还有两处次要问题：

• 颜色数组第一个色值缺少#前缀，会导致填充色失效
• x轴的格式化依然沿用了原示例的时间格式化规则，和分类数据不匹配

需修改的代码段 #

1. 移除对分类字段的时间解析，修改dataset生成逻辑：

// 删掉无用的var parse = d3.time.format("%Y").parse; 这一行
// Transpose the data into layers
var dataset = d3.layout.stack()(["Year 1", "Year 2", "Year 3"].map(function(years) {
  return data.map(function(d) {
    // 直接把x赋值为分类名称，不需要解析
    return {x: d.Category, y: +d[years]};
  });
}));

2. 修改x轴格式化规则，移除时间格式化：

var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom")
  // 直接返回分类名即可
  .tickFormat(d => d);

3. 补全颜色值的#前缀：

var colors = ["#b33040", "#d25c4d", "#f2b447", "#d9d574"];

修改完成后即可正常渲染堆叠柱状图、坐标轴与分类标签。

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