Question

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

Answer 1

在D3中，domain和range都必须是数组：

如果指定了domain，则将scale的域设置为指定的数字数组。

还有：

如果指定了范围，则将比例范围设置为指定的值数组。

因此，而不是：

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 scale函数保持返回undefined

1 个答案: