d3范围/域返回负值

d3 range/domain returning negative values?

本文关键字：返回 范围 d3      更新时间：2024-02-16

我有这个数组：

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。

您的问题是调用bucket_width(i)而不是bucket_width(d)。因此，您将传入0、1等的值，这些值比2656的min值小很多。

演示：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) );
});

输出：

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
相关文章：