Javascript 为Sankey图表中的节点生成渐变色

我正在使用javascript中的Sankey图表（如果需要的话，可以在react应用程序中使用），并且希望Sankey中的节点具有基于其x，y坐标的渐变

例如，在下图中，x轴向右，y轴向下，我想在原点指定一个起始颜色，可能在最大x值指定一个停止颜色，在最大y值指定一个停止颜色，并且有一种方法为给定（x，y）对的平面中的每个点生成颜色

那么有没有一个梯度公式（

get_gradient

）可以用以下方式在Sankey中使用

node.append("rect")
  .style("fill", function (d) {
    return get_gradient(d.x, d.y);
  })

像这样

其想法是为x/y创建两个颜色插值器。然后，给定一个x/y对，根据svg宽度/高度将其转换为标准化数字。如果x是500，宽度是1000，归一化的x是0.5。然后您可以将其插入插值器以生成颜色。对y做同样的处理，现在你有2种颜色来做渐变

var y = d3.interpolate('#fff','#2196f3')
var x = d3.interpolate('#fff','#4caf50')

var width = 400;
var height=  400;

d3.select('svg')
    .attr('width',width)
    .attr('height',height)
    .on('mousemove',function(){
        var mouse = d3.mouse(this)
        var xNormalized = mouse[0]/width
        var yNormalized = mouse[1]/height

        var xColor = x(xNormalized)
        var yColor = y(yNormalized)

        var gradient = `linear-gradient(${xColor},${yColor})`
        d3.select('div').style('background',gradient)
    })

var y = d3.interpolate('#fff','#2196f3')
var x = d3.interpolate('#fff','#4caf50')

var width = 400;
var height=  400;

d3.select('svg')
    .attr('width',width)
    .attr('height',height)
    .on('mousemove',function(){
        var mouse = d3.mouse(this)
        var xNormalized = mouse[0]/width
        var yNormalized = mouse[1]/height

        var xColor = x(xNormalized)
        var yColor = y(yNormalized)

        var gradient = `linear-gradient(${xColor},${yColor})`
        d3.select('div').style('background',gradient)
    })