d3.js 条形图 - Y 轴 NaN

Question

Getting NaN on the Y axis for a d3.js bar chart.

Question relates to this one .

The answer in that question has static data, which is identical to the Ajax JSON. See commented line for const data But the Ajax data is not working.

The data is loaded but the column with data has no height as there is no Y scale data.

Console log:

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

Chart with Ajax loaded data:

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

Chart with static data:

Answer 1

Although your dataset had an typo, which can break your current setup if you had the same in the json output. We can not be that sure if there is no data provided in example from actual json response, which can be different than what's in your const data example

const data = [{"Domain":"Knowledge","Knowledge":0},{"Domain":"Problem Solving","problem_solving":0},{"Domain":"Skill","skill":0},{"Domain":"Transferable","transferable":100}];   

Try with lowercase "knowledge":0 which was printing the chart correctly on my screen

https://jsfiddle.net/978ync63/