Функция масштабирования X в D3.js продолжает возвращаться не определена

Question

Я новичок в D3.js и пытаюсь составить гистограмму с ВВП по оси Y и по оси X.

Я пытаюсь создать xScale с d3.timeScale(), но по какой-то причине код продолжает возвращаться не определенно при его использовании. Ниже мой код, что я делаю неправильно?

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

В D3, как 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