javascript - Angular svg 或 Canvas 使用颜色渐变

Question

我正在使用 angular 和 d3 创建一个 donut (在指令中)。

我可以很简单地给填充区域一种颜色(在这个 plunker 中它是蓝色的)。但我想要做的是让 SVG 平滑地改变它的颜色:

0% - 33.3% - red
33.4% - 66.66% - orange
66.7% - 100% green

指令:

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

笨蛋:http://plnkr.co/edit/8qGMeQkmM08CZxZIVRei?p=preview

Answer 1

首先给路径这样的Id:

var path = svg.selectAll("path")
                .data(data)
                .enter()
                .append("path")
                .style("fill", function(d){return d[2];})
                .attr("d", arc)
                .attr("id", function(d,i){return "id"+i;})//give id

然后在tween里面传递条件，改变路径的颜色

.attrTween("d", function (a) {
                    var i  = d3.interpolate(this._current, a);
                    var i2 = d3.interpolate(progress, percent)
                    this._current = i(0);

                    return function(t) {
                        if(i2(t) < 33.3)
                          d3.selectAll("#id1").style("fill", "red")
                        else if(i2(t) < 66.6)
                          d3.selectAll("#id1").style("fill", "orange")
                        else if(i2(t) > 66.6)
                          d3.selectAll("#id1").style("fill", "green")

                        text.text( format(i2(t) / 100) );
                        return arc(i(t));
                    };
                });

工作代码 here

编辑

在你的指令中，你可以像这样在你的 defs 中制作 gradient:

        var defs = svg.append("defs");
        var gradient1 = defs.append("linearGradient").attr("id", "gradient1");
        gradient1.append("stop").attr("offset", "0%").attr("stop-color", "red");
        gradient1.append("stop").attr("offset", "25%").attr("stop-color", "orange");
        gradient1.append("stop").attr("offset", "75%").attr("stop-color", "green");

然后在路径中你可以这样定义渐变:

 var path = svg.selectAll("path")
        .data(data)
        .enter()
        .append("path")
        .style("fill", function(d, i) {
          if (i == 0) {
            return d[2];
          } else {
            return "url(#gradient1)";
          }
        })

工作代码 here

希望这对您有所帮助!