D3.js中的X scale函数保持返回undefined [英] X scale function in D3.js keeps returning undefined
本文介绍了D3.js中的X scale函数保持返回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屋!
查看全文