D3.js柱状图Y轴出现NaN问题（Ajax数据加载异常）

静态数据与Ajax加载的JSON结构完全一致，但Ajax加载的数据无法正常渲染——数据已加载，但柱状图无高度，Y轴无有效刻度数据。控制台报错如下：

Error: <rect> attribute y: Expected length, "NaN".
Error: <rect> attribute height: Expected length, "NaN".
Error: <text> attribute y: Expected length, "NaN".

Ajax加载数据的图表效果：

静态数据渲染的图表效果：

相关代码 #

var margin = {top: 50, right: 135, bottom: 70, left: 80},
    width = 1050 - margin.left - margin.right,
    height = 540 - margin.top - margin.bottom;  

var svg = d3.select("#domains")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

//const data = [{"Domain":"Knowledge","Knowledge":0},{"Domain":"Problem Solving","problem_solving":0},{"Domain":"Skill","skill":0},{"Domain":"Transferable","transferable":100}];   
    
d3.json("json/domains.json", function(error, data) {

const normalized = data.map(item => {
  const name = item['Domain'];
 const attr = name.toLowerCase().replace(' ', '_');
  const value = item[attr];
  return {name, value};
});

console.log('N: ', normalized);
/*
// Transpose the data into layers
var dataset = d3.layout.stack()(["Knowledge", "Problem Solving, Skill, Transferable"].map(function(lvl) {
  return data.map(function(d) {
    return {
      x: d.Domain,
      y: d[lvl]
    };
  });
}));

var disciplines = d3.nest()
  .key(function(d){return d.Domain})
  .rollup(function(leaves){
    return d3.sum(leaves, function(d) {return d3.sum(d3.values(d))});
  })
  .entries(data);
*/

// Set x, y and colors
var x = d3.scale.ordinal()
  .domain(normalized.map(item => item.name))
  .rangeRoundBands([10, width-10], 0.35, 0);

const maxValue = normalized.reduce((max, item) => Math.max(max, item.value), 0);

var y = d3.scale.linear()
  .domain([0, maxValue])
  .range([height, 0]);

var colors = ["#83d1c4", "#f17950", "#838BD1", "#F150BE"];

// Define and draw axes
var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left")
  .ticks(5)
  .tickSize(-width, 0, 0)
    .tickFormat(function(d) {
  return d;     
});

var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom")
  .outerTickSize(0)


d3.select('.y axis .tick:first-child').remove();

/*
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-0, 0])
.html(function(d) {
  return d.y + '%';
})
  
svg.call(tip);
*/

svg.append("g")
  .attr("class", "y axis")
  .attr("transform", "translate(0,0)")
  .call(yAxis);


svg.append("g")
  .call(xAxis)
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);
  
svg.append("text")
.attr("x", 390 )
.attr("y",  480 )
.style("text-anchor", "middle")
.text("Domains");
  
svg.append("text")
 .attr("x", -200 )
 .attr("y",  -40 )
 .attr("transform", "rotate(-90)" )
 .attr('style', 'font-size:12px')
 .style("text-anchor", "middle")
 .text("Percentage of Learning Events");

// Create groups for each series, rects for each segment
var groups = svg.selectAll("g.group")
  .data(normalized)
  .enter().append("g")
  .attr("class", "group")
  .style("fill", function(d, i) { return colors[i]; });

groups.append("rect")
  .attr("y", function(d) { return y(d.value); })
  .attr("x", d => x(d.name))
  .attr("height", function(d) { return y(0) - y(d.value); })
  .attr('class', 'segment')
  .attr("width", x.rangeBand())
  // .on('mouseover', tip.show)
  // .on('mouseout', tip.hide);


columns = svg.append("g")
  .selectAll("text")
  .data(normalized)
  .enter().append("text")
  .attr("x", function(d){
    return x(d.name) + x.rangeBand()/2
  })
  .attr("y", function (d) {
    return y(d.value);
  })
  .attr("dy", "-0.7em")
  .attr('style', 'font-size:11px')
  .text( function (d){
    return d3.format(".2f")(d.value) + '%';
  })
  .style({fill: 'black', "text-anchor": "middle"});
  
  
});

内容的提问来源于Stack Exchange，提问作者IlludiumPu36