如何使用 d3js 定义带间隔的比例

Question

我有这些类别：

    var IMCcat = [
        {color:'#F43E3E',min:40,max:200,name:'obésité morbide ou massive'},
        {color:'#F4B4B4',min:35,max:40,name:'obésité sévère'},
        {color:'#FAE9CA',min:30,max:35,name:'obésité modérée'},
        {color:'#FFFFD4',min:25,max:30,name:'surpoids'},
        {color:'#E9FFDA',min:18.5,max:25,name:'corpulence normale'},
        {color:'#FFFFD4',min:16.5,max:18.5,name:'maigreur'},
        {color:'#F43E3E',min:0,max:16.5,name:'famine'}
    ];

（这些是体重指数（BMI），但在法语（IMC））

如您所见，我的域从 0 到 200，但不同的类别有不同的宽度。

我想用 d3 定义一个比例，域是 BMI，范围是颜色。颜色是离散值，但域是连续的。

我需要向秤提供重量，并获得相对颜色。如果提供重量，我得到包含颜色和名称的对象（连同最小值和最大值但无用），那就更好了。

如果你想试试，这里是BMI函数：

    function BMI(weight) {
        return weight / (height * height);
    }

由于范围重叠，我如何设置排除或包含最小值，而最大值相反？

谢谢

如果给秤的是 BMI，而不是体重，那也没关系。我将把我的比例包装在一个进行转换的函数中。

Answer 1

使用threshold scale：

//reverse array so BMI is ascending 
IMCcat = IMCcat.reverse();

//create scale
var scale = d3.scale.threshold()
  //set the domain equal to the min weights, w/ lowest removed
  .domain(IMCcat.map(function(d){ return d.min; }).slice(1))
  //set the range equal to the colors
  .range(IMCcat.map(function(d){ return d.color; }))

比例尺将 BMI 转换为颜色：

> scale(40)
"#F43E3E"
> scale(30)
"#FAE9CA"

要创建一个将 BMI 转换为带有颜色和名称的对象的比例，只需更改比例的范围：

> scale.range(IMCcat)
> scale(20)
Object {color: "#E9FFDA", min: 18.5, max: 25, name: "corpulence normale"}