D3.js : 영역 전체에 색 그라데이션 그리기?

Question

D3을 사용하여 빨강, 오렌지, 노란색, 녹색, 파란색, 분홍색, 자주색으로 전환하는 여러 정지 점이있는 색상 그라디언트를 그립니다. 이 빨간색에서 파란색으로, 지금까지의 내가 가지고 같다

:

var color = d3.scale.linear() 
    .domain([0, values.length - 1]) 
    .range(["hsl(62,100%,90%)", "hsl(228,30%,20%)"]); 
... 
g.each(function(d) { 
    color.interpolate(d.value); 

    d3.select(this).selectAll("rect") 
    .data(values) 
    .enter().append("rect") 
    .attr("x", x) 
    .attr("width", x.rangeBand()) 
    .attr("height", y.rangeBand) 
    .style("fill", color); 
}); 

내가 마이크 Bostock의 HSL 컬러 규모에 기반 : http://jsfiddle.net/Y2zue/

나는 색상을 사각형 그리기 및 interpoloating하여이 작업을 수행 할 예 : I가 http://bl.ocks.org/d3noob/4433087 또는 http://jsfiddle.net/ZCwrx/

,617,451 같은 대신 SVG 선형 구배를 사용되어야 하는지를 https://gist.github.com/mbostock/3014589

그러나 지금 궁금해

가장 좋은 방법은 무엇입니까? 사각형 또는 선형 그래디언트?

Answer 1

SVG 그래디언트를 사용하는 것이 좋습니다. 코드 작성이 쉬워지고 성능이 향상됩니다.

Answer 2

I가 멈추고 시작과 SVG 구배 다음 코드 사용하고 : 래드로 시작의 수직 높이를 설정 한 그라데이션을 정의

//를/y1 통해 중지 y2

var grad = svg.append("defs") 
    .append("linearGradient") 
    .attr({ 
     "id" : "grad", 
     "x1" : "0%", 
     "x2" : "0%", 
     "y1" : "100%", 
     "y2" : "65%" 
    }); 

grad.append("stop") 
    .attr("offset", "50%") 
    .style("stop-color", "yellow"); 

grad.append("stop") 
    .attr("offset", "70%") 
    .style("stop-color", "skyblue"); 

mySvg.append("rect") 
    .attr({ 
    width : width, 
    height : height, 
    fill : "url(#grad)" 
    })