d3.js 条形图 - Y 轴 NaN

Question

在 d3.js 条形图的 Y 轴上获取 NaN。

问题与此有关。

该问题的答案有 static 数据，该数据与 Ajax JSON 相同。 请参阅const data的注释行但是 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"});
    
    
    });

带有 static 数据的图表：

Answer 1

尽管您的数据集有错字，但如果您在 json output 中也有错字，这可能会破坏您当前的设置。 我们无法确定示例中是否没有从实际 json 响应中提供数据，这可能与您的const data示例中的不同

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

尝试使用lowercase "knowledge":0在我的屏幕上正确打印图表

https://jsfiddle.net/978ync63/