如何使用d3js间隔定义刻度

我有这些类别:

    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而不是体重。我将把比例尺包装在执行转换的函数中。

亚当·皮尔斯

使用阈值量表

//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"}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何使用d3js间隔定义刻度

来自分类Dev

轴上的自定义刻度大小(d3js)

来自分类Dev

使用次要和主要刻度线d3js创建波特图

来自分类Dev

d3js 设置 X 轴刻度位置

来自分类Dev

d3.js-如何在D3js中为时间刻度在X轴上滴答滴答?

来自分类Dev

D3.js:x轴之间的刻度间隔可变

来自分类Dev

如何在d3js中正确使用字符串值作为轴刻度?无法正确映射数据无法找出此代码中的错误

来自分类Dev

d3js tick函数定义

来自分类Dev

D3js:如果某一轴的数据为0,如何生成X轴标签/刻度?

来自分类Dev

如何使用d3js实现联合绘图

来自分类Dev

如何使用d3js获取svg元素的宽度?

来自分类Dev

如何使用d3js拖动完整的svg?

来自分类Dev

如何使用d3js实现关节图

来自分类Dev

D3js:在堆叠数据集之前,如何以不规则的时间间隔对数据集进行插值?

来自分类Dev

使用 d3 和 dc.js 自定义时间线刻度

来自分类Dev

使用d3js排序

来自分类Dev

使用d3js排序

来自分类Dev

D3js折线图的Y轴上的刻度大小不同

来自分类Dev

d3js甘特图,日期/时间刻度在顶部,当天是蓝线

来自分类Dev

D3js序数轴未显示所有刻度

来自分类Dev

D3JS:无法在 x 轴中仅设置 5 个刻度

来自分类Dev

D3js 第一个刻度标签丢失

来自分类Dev

如何将angularjs指令绑定到链接函数中定义的d3js节点

来自分类Dev

D3js v4。如何确定自定义事件?

来自分类Dev

D3.js刻度线刻度

来自分类Dev

D3js dx未定义

来自分类Dev

D3js dx未定义

来自分类Dev

.attr未定义d3js

来自分类Dev

D3.js时间刻度:当数据以秒为单位时,每分钟间隔的刻度线间隔很好吗?