d3.js - 如何计算 SVG 线性渐变

Question

如果我有一条向上倾斜的直线，是否可以将渐变填充设置为，当曲线低于直线时为红色，高于直线时为蓝色。下面是两个线函数和 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")
}

标签： d3.jssvglinear-gradients

Answer 1

SVG 有一个 transformGradient 属性，允许您使用标准变换指令来操作线性渐变，解决方案如下：

var gradient = d3.select("#area- gradient").attr("gradientTransform",`rotate(-18),${xScale(trendGrowthX[5]),${yScale(trendGrowthY[5])})`);