Sankey 차트의 노드에 대한 그래디언트 색상 생성

Question

저는 Sankey 차트를 자바 스크립트에서 사용하고 있습니다 (문제가있는 경우 반응 앱에서). Sankey의 노드가 x, y 좌표를 기반으로하는 그래디언트를 갖기를 바랍니다.

예를 들어 x 축이 오른쪽으로 가고 y 축이 아래로가는 다이어그램에서 원점에 시작 색상을 지정하고 최대 x 값에서 정지 색상을 지정할 수 있습니다. 최대 y 값에서 색상을 중지하고 (x, y) 쌍이 주어진 평면의 각 점에 대한 색상을 생성하는 방법이 있습니다.

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

따라서 다음과 같은 방법으로 Sankey에 사용될 수있는 그라데이션 식 (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에 대해서도 똑같이하십시오. 이제 그라디언트를 만드는 데 두 가지 색이 있습니다.

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