D3.jsのXスケール関数が未定義のまま戻ってきます

Question

D3.jsが新しく、Y軸にGDP、X軸に日付を持つ棒グラフを作成しようとしています。

私はd3.timeScale（）でxScaleを作成しようとしていますが、何らかの理由でコードが使用されても未定義のまま返され続けます。以下は私のコードですが、何が間違っていますか？ D3で

var data = [ 
    [ 
    "2011-01-01", 
    15238.4 ] 
    , 
    ["2015-07-01", 
    18064.7 
    ] 
]; 

var w = 1000; 
var h = 300; 
var barPadding = 1; 

var svg = d3.select("#chart") 
      .append("svg") 
      .attr("height", h); 

var maxDate = d3.max(data, function(d){ 

    return d[0]; 

}); 

var minDate = d3.min(data, function(d){ 

    return d[0]; 

}); 

var maxGDP = d3.max(data, function(d){ 

    return d[1]; 

}); 

var minGDP = d3.min(data, function(d){ 

    return d[1]; 

}); 


minDate = new Date(minDate); 

maxDate = new Date(maxDate) 

var xScale = d3.scaleTime() 
        .domain([minDate, maxDate]) 
        .range(0,w) 

var yScale = d3.scaleLinear() 
        .domain([minGDP, maxGDP]) 
        .range(0,h) 

      .attr("width", w) 

var bars = svg.selectAll("rect") 
       .data(data) 
       .enter() 
       .append("rect") 

var barAttributes = bars 
         .attr("x", function(d) { return xScale(d[0]);}) 
         .attr("y", function(d) { return h - (d[1]/100);}) 
         .attr("width", function(d,i) { return w/data.length;}) 
         .attr("height", function(d) { return (d[1]/100) *4 ;}) 
         .attr("fill", "#8e44ad");  

Answer 1

、domain及びrange両方がアレイでなければならない：ドメインを指定した場合

、スケールのドメインは、数値の指定した配列に設定します。

も：

範囲が指定されている場合は、値の指定した配列にスケールの範囲が設定されます。

したがって

、代わりに：

var xScale = d3.scaleTime() 
    .domain([minDate, maxDate]) 
    .range(0,w); 

それは次のようになります。

var xScale = d3.scaleTime() 
    .domain([minDate, maxDate]) 
    .range([0,w]);//an array here