X Skalierfunktion in D3.js kehrt zurück undefined

Question

Ich bin neu in D3.js und versuche, ein Balkendiagramm mit GDP auf der Y-Achse und Datum auf der X-Achse zu machen.

Ich versuche, eine xScale mit d3.timeScale() zu machen, aber aus irgendeinem Grund kehrt der Code undefiniert zurück, wenn Sie ihn verwenden. Unten ist mein Code, was mache ich falsch?

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

In D3, beide domain und range haben eine Array sein:

Wenn Domäne angegeben wird, setzt der Domain Skala in das angegebene Array von Zahlen.

Und auch:

Wenn Bereichs angegeben wird, setzt die Reichweite der Skala in das angegebene Array von Werten.

Statt also:

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

es sein sollte:

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