Question

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

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

(origin)
|-------> x coordinate
|
|
v
y coordinate

那么是否有一个梯度公式（get_gradient）可以通过以下方式在Sankey中使用？

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

Answer 1

喜欢这个？：https://jsfiddle.net/gcbojt2p/1/

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

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)
    })

在Sankey图表中为节点生成渐变颜色

1 个答案: