如果我有向上倾斜的直线,则可以将渐变填充设置为在曲线低于直线下方时为红色,而在上方时为蓝色。下面是两个线函数以及d3面积函数生成器及其关联的数组。
//global Variables:
var trendGrowthX =[0,1,2,3,4,5,6,7,8,9,10];
var trendGrowthY = [2,2.5,3,3.5,4,4.5,5,5.5,6,6.5,7];
var actualX = [0,1,2,3,4,5,6,7,8,9,10];
var actualY = [2,4.3,5.5,3.5,2,3,5.5,7.5,6.5,5.5,5];
//D3 path generator functions:
function addTrend(){
var trendLine = d3.line()
.x(function(d,i,a){return xScale(trendGrowthX[i]);})
.y(function(d,i,a){return xScale(trendGrowthY[i]);})
}
function addActual(){
var actualIncome = d3.line()
.x(function(d,i,a){return xScale(actualX[i])})
.y(function(d,i,a){return yScale(actualY[i])})
.curve(d3.curveCatmullRom.alpha(0.5))
g.append("path").attr("d",actualIncome(actualX))
.style("stroke","green")
.style("stroke-width",3)
}
function addArea(){
var area = d3.area()
.attr("x1",function(d,i,a){return xScale(actualX[i]); })
.attr("y1",function(d,i,a){return xScale(actualY[i]); })
.attr("y0",function(d,i,a){return xScale(trendGrwothY[i]); })
.attr("x0",function(d,i,a){return xScale(trendGrowthX[i]); })
g.append("path")
.attr("d",function(d,i,a){ area(actualX)})
.style("fill","url(#area-gradient)")
.attr("pointer-events","none")
}
答案 0 :(得分:0)
SVG具有transformGradient属性,可让您使用标准变换指令来操纵线性渐变,解决方法如下:
var gradient = d3.select("#area- gradient").attr("gradientTransform",`rotate(-18),${xScale(trendGrowthX[5]),${yScale(trendGrowthY[5])})`);