D3.js中的X scale函数保持返回undefined [英] X scale function in D3.js keeps returning undefined

问题描述

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

I am new to D3.js and trying to make a bar chart with GDP on Y axis and date on X axis.

我正在尝试制作xScale使用d3.timeScale（）但由于某种原因，代码在使用时仍会返回undefined。以下是我的代码，我做错了什么？

I am trying to make a xScale with d3.timeScale() but for some reason the code keeps returning undefined when using it. Below is my code, what am I doing wrong?

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

In D3, both domain and range have to be an array:

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

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 scale函数保持返回undefined的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！