javascript – D3.js中的X scale函数不断返回undefined

我是D3.js的新手并试图制作一个条形图,其中Y轴为GDP,X轴为日期.

我试图用d3.timeScale()创建一个xScale,但由于某种原因,代码在使用时仍然返回undefined.以下是我的代码,我做错了什么？

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中,域和范围都必须是一个数组：

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

标签：javascript,d3-js,scale,data-visualization
来源： https://codeday.me/bug/20190823/1701670.html