如何将数据库数值转换为0-2区间百分比用于D3.js弧形绘制？

核心计算逻辑 #

• 计算数据库获取的四个数值总和
• 基于总和算出每个数值的占比，再乘以最大为2的缩放系数（保证四个perc总和不超过2）
• 将计算结果赋值给perc1至perc4

动态计算perc的代码实现 #

替换原代码中硬编码的perc值，改为从数据库数值动态计算：

// 从数据库获取的示例数值
const values = [129, 53, 111, 95];
// 计算数值总和
const totalValue = values.reduce((acc, val) => acc + val, 0);
// 缩放系数，最大设为2，确保perc总和不超过2
const scaleFactor = 2;
// 生成对应perc值
const [perc1, perc2, perc3, perc4] = values.map(val => (val / totalValue) * scaleFactor);

// 可选：调试时验证总和，应接近2
console.log('perc总和:', perc1 + perc2 + perc3 + perc4);

完整整合后的代码 #

将动态计算逻辑嵌入原D3.js弧形生成代码：

var totalPercent = .75;
var padRad = 0.025;
var percToRad = function (perc) {
    return degToRad(percToDeg(perc));
};
var degToRad = function (deg) {
    return deg * Math.PI / 180;
};
var percToDeg = function (perc) {
    return perc * 360;
};

// 从数据库获取的示例数值
const values = [129, 53, 111, 95];
const totalValue = values.reduce((acc, val) => acc + val, 0);
const scaleFactor = 2;
const [perc1, perc2, perc3, perc4] = values.map(val => (val / totalValue) * scaleFactor);

//****Set up the arc generator*****
var next_start = totalPercent;

arcStartRad = percToRad(next_start);
arcEndRad = arcStartRad + percToRad(perc1 / 4);
next_start += perc1 / 4;
const arc1 = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius).startAngle(arcStartRad).endAngle(arcEndRad);

arcStartRad = percToRad(next_start);
arcEndRad = arcStartRad + percToRad(perc2 / 4);
next_start += perc2 / 4;
const arc2 = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius).startAngle(arcStartRad + padRad).endAngle(arcEndRad);

arcStartRad = percToRad(next_start);
arcEndRad = arcStartRad + percToRad(perc3 / 4);
next_start += perc3 / 4;
const arc3 = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius).startAngle(arcStartRad + padRad).endAngle(arcEndRad);

arcStartRad = percToRad(next_start);
arcEndRad = arcStartRad + percToRad(perc4 / 4);
next_start += perc4 / 4;
const arc4 = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius).startAngle(arcStartRad + padRad).endAngle(arcEndRad);

补充说明 #

• 缩放系数设为2时，四个perc的总和刚好等于2，完全满足限制条件
• 若需要缩短弧形总长度，可减小缩放系数（如1.5），此时perc总和会相应降低，仍符合要求
• 使用reduce和map处理数值，代码简洁且易于维护

内容的提问来源于stack exchange，提问作者Lim