javascript - D3.js中的X标度函数不断返回未定义

我是D3.js的新手，并尝试制作条形图，其中Y轴显示GDP，X轴显示日期。

我正在尝试使用d3.timeScale()创建xScale，但是由于某些原因，代码在使用它时始终返回未定义的状态。以下是我的代码，我在做什么错？

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

最佳答案

在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