我有这个数组:
var bucket_contents = [8228, 21868, 12361, 15521, 3037, 2656];
我正在尝试使用范围/域根据这些值更改一系列rect
的宽度。这是我的代码:
var bucket_width = d3.scale.linear()
.domain([d3.min(bucket_contents), d3.max(bucket_contents)])
.range([0, 1000]);
bucket.forEach(function(d, i) {
d.x = (width / bucket.length) * i;
d.y = (height / 2) - 25;
d.w = bucket_width(i);
console.log(bucket_width(i));
});
d3.select("#plot").selectAll(".bucket")
.data(bucket)
.enter()
.append("rect")
.attr("class", "bucket")
.attr("x", function(d, i) { return d.x; })
.attr("y", function(d, i) { return d.y; })
.attr('width', function(d, i) { return d.w; })
.attr('height', '50')
.style("fill", '#000');
目前,forEach循环中的控制台日志bucket_width(i)
输出以下内容:
-138.24692900270665
-138.1948782011243
-138.14282739954194
-138.09077659795963
-138.03872579637726
-137.98667499479492
控制台登录d3.min(..)
为2656,d3.max(..)
为21868。
我做错了什么?我认为范围'规范化'该范围内的任何值,即21868将返回1000并且2656将返回0.
答案 0 :(得分:1)
您的问题是您正在拨打bucket_width(i)
而不是bucket_width(d)
。因此,您传递的0
,1
等值小于min
值2656的值。
var contents = [8228, 21868, 12361, 15521, 3037, 2656];
var bucket_width = d3.scale.linear().domain(d3.extent(contents)).range([0, 1000]);
contents(function(d, i){
console.log( d, i, bucket_width(i), bucket_width(d) );
});
输出:
8228 0 -138.24 290.03
21868 1 -138.19 1000.00
12361 2 -138.14 505.15
15521 3 -138.09 669.63
3037 4 -138.03 19.83
2656 5 -137.98 0.00