Angular svg或canvas使用颜色渐变 [英] Angular svg or canvas to use colour gradients
问题描述
我正在使用angular和d3创建一个甜甜圈（在指令中）。
我可以简单地给填充区域一个颜色（在这个plunker中它是蓝色）。但我想要做的是让SVG顺利地改变它的颜色：
0％ - 33.3％ - 红色
33.4％ - 66.66％ - 橙色
66.7％ - 100％绿色
指令：
app.directive（'donutDirective'，function（）{
return {
restrict：'E' ，
范围：{
半径：'='，
百分比：'='，
文字：'='，
}，
链接： function（scope，element，attrs）{
var radius = scope.radius，
percent = scope.percent，
percentLabel = scope.text，
format = d3.format（ 。0％），
progress = 0;
var svg = d3.select（element [0]）
.append（'svg'）
.style（'width'，radius / 2 +'px'）
.style（'height'，radius / 2 +'px'）;
var don utScale = d3.scale.linear（）
.domain（[0,100]）
.range（[0,2 * Math.PI]）;
// var color =＃5599aa;
var color =＃018BBB;
var data = [
[0,100，＃b8b5b8]，
[0,0，颜色]
];
var arc = d3.svg.arc（）
.innerRadius（radius / 6）
.outerRadius（radius / 4）
.startAngle（function（d） ）{return donutScale（d [0]）;}）
.endAngle（function（d）{return donutScale（d [1]）;}）;
var text = svg.append（text）
.attr（x，radius / 4）
.attr（y，radius / 4）
.attr（dy，。35em）
.attr（text-anchor，middle）
.attr（font-size，14px）
.style（fill，black）
.attr（text-anchor，middle）
.text（percentLabel）;
var path = svg.selectAll（path）
.data（data）
.enter（）
.append（path）
.style（fill，function（d）{return d [2];}）
.attr（d，arc）
.each（function（d）{
this._current = d;
// console.log（this._current）
;}）;
//更新数据！
data = [
[0,100，＃b8b5b8]，
[0，％，color]
];
路径
.data（数据）
.attr（transform，translate（+ radius / 4 +，+ radius / 4 +））
.transition（200）.duration（2150）.ease（'linear'）
.attrTween（d，function（a）{
var i = d3.interpolate（this。 _current，a）;
var i2 = d3.interpolate（progress，percent）
this._current = i（0）;
// console.log（this._current）;
return function（t）{
text.text（format（i2（t）/ 100））;
return arc（i（t））;
};
}）;
}
};
}）;
Plunker：
请参阅以下工作代码： http ：//codepen.io/anon/pen/vLVmyV
你可以使用像这样的d3线性刻度来平滑地进行颜色转换：
//创建颜色比例t o smothly改变甜甜圈的颜色
var colorScale = d3.scale.linear（）。domain（[0,33.3,66.66,100]）。range（['＃cc0000'，'＃ffa500'，' ＃ffa500' ， '＃00CC00']）;
然后，当你更新路径（使用attrTween）来制作填充动画时，只需要路径代表甜甜圈的填充部分，我们称之为 colorPath 并更改它的填充，在补间中添加以下内容：
//使用我们之前创建的colorScale将颜色设置为路径，具体取决于它的百分比
//
colorPath.style（'fill'，colorScale（i2（ t）））
您的attrTween将如下所示：
colorPath.data（[[0，percent，color]]）
.transition（200）.duration（2150）.ease（'linear'）
.attrTween（d，function（a）{
var i = d3.interpolate（this._current，a）;
var i2 = d3.interpolate（progress，percent）
this._current = i（0）;
// console.log（this._current）;
return function（t）{
text.text（format（i2（t） / 100））;
colorPath.style（'fill'，colorScale（ i2（t）））
返回arc（i（t））;
};
}）;
请注意，我们只更新colorPath的数据： colorPath.data （[[0，百分比，颜色]]）
整个工作示例就在这里： http://plnkr.co/edit/ox82vGxhcaoXJpVpUel1?p=preview
I am using angular and d3 to create a donut (in a directive).
I can quite simply give the filled area a colour (in this plunker it is blue). But what i want to do is have the SVG change its colours smoothly from:
0% - 33.3% - red
33.4% - 66.66% - orange
66.7% - 100% green
Directive:
app.directive('donutDirective', function() {
return {
restrict: 'E',
scope: {
radius: '=',
percent: '=',
text: '=',
},
link: function(scope, element, attrs) {
var radius = scope.radius,
percent = scope.percent,
percentLabel = scope.text,
format = d3.format(".0%"),
progress = 0;
var svg = d3.select(element[0])
.append('svg')
.style('width', radius/2+'px')
.style('height', radius/2+'px');
var donutScale = d3.scale.linear()
.domain([0, 100])
.range([0, 2 * Math.PI]);
//var color = "#5599aa";
var color = "#018BBB";
var data = [
[0,100,"#b8b5b8"],
[0,0,color]
];
var arc = d3.svg.arc()
.innerRadius(radius/6)
.outerRadius(radius/4)
.startAngle(function(d){return donutScale(d[0]);})
.endAngle(function(d){return donutScale(d[1]);});
var text = svg.append("text")
.attr("x",radius/4)
.attr("y",radius/4)
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.attr("font-size","14px")
.style("fill","black")
.attr("text-anchor", "middle")
.text(percentLabel);
var path = svg.selectAll("path")
.data(data)
.enter()
.append("path")
.style("fill", function(d){return d[2];})
.attr("d", arc)
.each(function(d) {
this._current = d;
// console.log(this._current)
;});
// update the data!
data = [
[0,100,"#b8b5b8"],
[0,percent,color]
];
path
.data(data)
.attr("transform", "translate("+radius/4+","+radius/4+")")
.transition(200).duration(2150).ease('linear')
.attrTween("d", function (a) {
var i = d3.interpolate(this._current, a);
var i2 = d3.interpolate(progress, percent)
this._current = i(0);
// console.log(this._current);
return function(t) {
text.text( format(i2(t) / 100) );
return arc(i(t));
};
});
}
};
});
Plunker: http://plnkr.co/edit/8qGMeQkmM08CZxZIVRei?p=preview
i want to do is have the SVG change its colours smoothly from:
0% - 33.3% - red 33.4% - 66.66% - orange 66.7% - 100% green
Assuming that you want a color transition/scale like this one:
See working code for this: http://codepen.io/anon/pen/vLVmyV
You can smothly make the color transition using a d3 linear scale like this:
//Create a color Scale to smothly change the color of the donut
var colorScale = d3.scale.linear().domain([0,33.3,66.66,100]).range(['#cc0000','#ffa500','#ffa500','#00cc00']);
Then, when you update the path (with the attrTween) to make the filling animation, take only the Path the represents the filled part of the donut, lets call it colorPath and change the fill of it adding the following like in the tween:
//Set the color to the path depending on its percentage
//using the colorScale we just created before
colorPath.style('fill',colorScale(i2(t)))
Your attrTween will look like this:
colorPath.data([[0,percent,color]])
.transition(200).duration(2150).ease('linear')
.attrTween("d", function (a) {
var i = d3.interpolate(this._current, a);
var i2 = d3.interpolate(progress, percent)
this._current = i(0);
// console.log(this._current);
return function(t) {
text.text( format(i2(t) / 100) );
colorPath.style('fill',colorScale(i2(t)))
return arc(i(t));
};
});
Please note that we only update the data for the colorPath: colorPath.data([[0,percent,color]])
The whole working example is right here: http://plnkr.co/edit/ox82vGxhcaoXJpVpUel1?p=preview
这篇关于Angular svg或canvas使用颜色渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
