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

Question relates to

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:

CodePudding user response：

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/