D3.js scaleLinear-domain-range 函数原生js实现

原创

已于 2024-06-20 11:44:21 修改 · 413 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#算法

于 2024-03-22 17:58:09 首次发布

本文介绍了D3.js中的scaleLinear比例尺生成函数，包括其domain和range的原理，并提供了使用原生JavaScript实现该功能的方法，通过实例进行详细讲解和测试。

1.d3比例尺生成函数

/**
*生成一个比例尺函数输入value返回对应的平面像素
*/
let scaleLinear = d3.scaleLinear()
                 .domain([minDomain,maxDomain])
                 .range([minPixel,maxPixel]);

let x = scaleLinear(value);

2.实现

  /**
   * 平面坐标范围值转区间像素函数
   * @param value 数值
   * @param minDomain 最小值
   * @param maxDomain 最大值
   * @param minPixel 起始像素
   * @param maxPixel 结束像素
   * @returns {*} value对应的像素值
   */
  function mapValueToPixel(value, minDomain, maxDomain, minPixel, maxPixel) {
    return (Math.round((value - minDomain) / (maxDomain - minDomain) * (maxPixel - minPixel))) + minPixel;
  }

//实现过程👇

//⭐1 (value - minDomain) = 当前值到原点的距离 a

//⭐2 (maxDomain - minDomain) = 最大值到原点的距离 b

//⭐3 (maxPixel - minPixel) = 平面坐标跨度width c

//⭐4 (a/b) * c = 得到映射的长度 d

//⭐5 最后 将d加上原点minPixel 得到实际像素值

3.测试


let linerScale = d3.scaleLinear()
    .domain([-100, 100])
    .range([-100, 200]);


console.log(linerScale(50))  
//输出125

console.log(mapValueToPixel(50, -100, 100, -100, 200)) 
//输出125