D3.js D3 V4错误：属性d:预期数字，“MNaN，0LNaN，0LNaN，…scaleLinear（）.domain（）.range（））

学习Pluralsight D3.js数据可视化基础课程。 获取错误：

数据来自

普朗克是

代码：

var realHeight = document.getElementById('d3Container').offsetHeight;
var realWidth = document.getElementById('d3Container').offsetWidth;

var scale = d3.scaleLinear().domain([130, 350]).range([10, 100]);

var githubUrl = 'https://api.github.com/repos/bsullins/d3js-resources/contents/monthlySalesbyCategoryMultiple.json';

var buildLine = function(ds, dl, idx) {
  var minSales = d3.min(ds.monthlySales, function(d) {
    return d.month
  });
  var maxSales = d3.max(ds.monthlySales, function(d) {
    return d.month
  });

  // create scales
  var xScale = d3.scaleLinear()
    .domain([minSales, maxSales])
    .range(0, realWidth);
  var yScale = d3.scaleLinear()
    .domain([0, maxSales])
    .range([realHeight, 0]);

  // add scales below in .x and .y
  var lineFun = d3.line()
    .x(function(d) {
      console.log(d.month); // outputs as type numbers in console
  // return ((d.month -20130001)/3.25); // hardcoded works 
  return xScale( d.month );
})
.y(function(d, i) {
  // var svgHeight = document.getElementById('d3Container').offsetHeight;
      // return ( (svgHeight / ( dl * (1+idx) ) - d.sales) ); // hardcoded works
      return yScale( d.sales );
    })
    .curve(d3.curveLinear);

  var svg3 = d3.select('body #d3Container')
    .append('svg')
    .attrs({
      'h': '100%',
      'w': '100%',
      'fill': 'black'
    });

  var viz = svg3.append('path')
    .attrs({
      /** access nested JSON here **/
      'd': lineFun(ds.monthlySales),
      'stroke': function() {
        return (idx + 1 === dl) ? 'royalblue' : 'lime';
      },
      'stroke-width': 4,
      'fill': 'white;'
    })
};
var showHeader = function(ds) {
  d3.select('body #d3Container')
    .append('h2')
    .text(ds.category + 'Sales 2013');
};

d3.json(githubUrl, function(error, data) {

  if (error) {
    return;
  } else {
    // decode data
    var decodedData = JSON.parse(window.atob(data.content));

    // pass in functions for each
    decodedData.contents.forEach(function(ds, idx) {
      showHeader(ds);
      buildLine(ds, decodedData.contents.length, idx);
    })
  }
});

最容易使用plunk。 可以取消对“硬编码作品”注释的注释，以查看其外观。

在D3的任何版本中，range都接受一个数组

您的xScale现在具有以下范围：

.range(0, hackWidth);

然而，它必须是：

.range([0, hackWidth]);

以下是更新的plunker：