D3.js 中的 X 缩放函数不断返回未定义 [英] 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.

我正在尝试使用 d3.timeScale() 制作 xScale，但由于某种原因，代码在使用时一直返回 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 中，domain 和 range 都必须是数组:

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

如果指定了域，则将秤的域设置为指定的数字数组.

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