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