d3范围/域返回负值？

Question

I have this array:

var bucket_contents = [8228, 21868, 12361, 15521, 3037, 2656]; 

I am trying to alter the width of a series of rect s based on these values using range/domain. This is my code:

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');

Currently the console log bucket_width(i) inside the forEach loop outputs the following:

-138.24692900270665
-138.1948782011243
-138.14282739954194
-138.09077659795963
-138.03872579637726
-137.98667499479492

Console log on d3.min(..) is 2656 and d3.max(..) is 21868 as expected.

What am I doing wrong? I thought range 'normalizes' any values within that range, ie 21868 would return 1000 and 2656 would return 0.

Answer 1

Your problem is that you are calling bucket_width(i) instead of bucket_width(d) . Hence, you are passing in values of 0 , 1 , etc. which are less than the min value of 2656 by quite some.

Demo: http://jsfiddle.net/2tq8S/

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) );
});

Output:

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