如何将d3插值函数作为参数传入自定义图表函数

你使用d3.colorX写法时，JavaScript的点属性访问语法会把colorX当做固定的属性名去d3对象下查找对应的值，而非读取你传入的colorX参数的实际值，自然找不到对应的d3插值函数，就会抛出错误。

根据你传参的形式有两种实现方式：

方式一（推荐）：直接传入插值函数本身 #

调用chart函数时直接把d3的插值函数作为参数传入，不需要做属性查找，写法更稳妥，也能避免拼写错误导致的问题：

// 定义函数时接收插值函数作为入参
function chart(interpolateFunc){
  const color = d3.scaleOrdinal(d3.quantize(interpolateFunc, mainData.children.length + 2));
}

// 调用时直接传对应d3插值函数即可
// 用彩虹色
chart(d3.interpolateRainbow)
// 要切换配色直接传其他插值函数即可，比如viridis配色
chart(d3.interpolateViridis)

方式二：传插值函数名字符串，用方括号动态访问属性 #

如果你的入参是前端组件返回的函数字符串名（比如下拉选择返回的是"interpolateRainbow"字符串），可以改用方括号语法访问d3的属性：

function chart(colorX){
  // 方括号内可以写变量，会读取变量的值作为属性名查找
  const color = d3.scaleOrdinal(d3.quantize(d3[colorX], mainData.children.length + 2));
}

// 调用时传插值函数的名字符串
chart("interpolateRainbow")

注意：使用方式二时需要确保传入的字符串和d3公开的插值函数名完全一致，建议加兜底逻辑，比如先判断d3[colorX]是否为函数，不存在则使用默认插值函数，避免报错。

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