D3 V4エラー：<path>属性D：予想される数、「MNaN、0LNaN、0LNaN、

Question

Pluralsight D3.jsデータの可視化の基礎コース 取得エラー後... scaleLinear（）ドメイン（）の範囲（）：。。。

this Github endpoint

Plunkerがあるから

データがあるhere

コード：

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

プラークと最も簡単に作業できます。 「ハードコーディングされた作品」コメントのコメントを外して、どのように見えるかを確認できます。

Answer 1

D3（任意のバージョン）では、range()はの配列を受け入れます。

あなたxScaleは今、この範囲を持っています

.range(0, hackWidth); 

はしかし、それがなければならない：https://plnkr.co/edit/DB0VVRsGQO4teIC6ltyQ?p=preview

：ここ

.range([0, hackWidth]); 

が更新plunkerです