D3.js绘制 颜色:RGB、HSL和插值 (V3版本)

转载地址D3.js绘制 颜色:RGB、HSL和插值 (V3版本)

如果要计算介于两个颜色之间的颜色,需要用到插值(Interpolation)。D3提供了d3.intrerpolateRgb()来处理RGB颜色之间的插值运算,d3.interpolateHsl()来处理HSL颜色之间的插值运算。更方便的是使用d3.interpolate(),它会自动判断颜色的类型。d3.interpolate()也可以处理数值、字符串等之间的插值。举个例子:

	//插值
        var a = d3.rgb(255,0,0)                 //红色
        var b = d3.rgb(0,255,0)                 //绿色
        var compute = d3.interpolate(a,b)

        console.log(compute(0))                 //输出#ff0000
        console.log(compute(0.2))               //输出#cc3300
        console.log(compute(0.5))               //输出#808000
        console.log(compute(1))                 //输出#00ff00

        console.log(compute(2))                 //输出#00ff00
        console.log(compute(-1))                //输出#ff0000

这段代码里,定义了两个RGB颜色:红(255,0,0)和绿(0,255,0)。然后,以这两个颜色对象作为d3.interpolate(a,b)的参数。d3.interpolate返回一个函数,保存在变量compute里。于是,compute可当做函数使用,参数是一个数值。
当数值为0时,返回红色。
当数值为1时,返回绿色。
当数值为0~1之间的值时,返回介于红色和绿色之间的颜色。
如果数值超过1,则返回绿色:数值小于0,则返回红色。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值