D3.js 中的 X 缩放函数不断返回未定义

Question

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

Answer 1

在 D3 中，domain 和 range 都必须是一个数组:

If domain is specified, sets the scale’s domain to the specified array of numbers.

还有：

If range is specified, sets the scale’s range to the specified array of values.

因此，而不是：

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

应该是：

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

D3.js 中的 X 缩放函数不断返回未定义

X scale function in D3.js keeps returning undefined

javascript

data-visualization

scale

d3.js