サンキーチャートのノードのグラデーションカラーを生成する

Question

私は、javankriptのサンキーチャート（問題の場合はリアクションアプリ）で作業しています。サンキーのノードにx、y座標に基づいたグラデーションを持たせたいと考えています。

たとえば、x軸が右に、y軸が下に行くような図では、原点で開始色を指定したいと思います。最大y値で色を停止し、（x、y）のペアを与えられた平面上の各点の色を生成する方法があります。

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

そこで、以下のようにサンキーに使用することができる勾配式（get_gradient）がありますか？このよう

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

Answer 1

アイデアは、x/yの2色補間を作成するhttps://jsfiddle.net/gcbojt2p/1/

あります？：。次に、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) 
    })