SVG 圓弧弧形漸變實現

前言

開發需求,需要實現一個弧形漸變的弧形,如下圖所示:


hx.png

首先是因為在安卓端開發此效果,是相對較簡單的,安卓端提供了一個角度漸變方法,但是在h5中無此方法。
在canvas以及svg中,漸變只有兩種:線性漸變,徑向漸變,經過嘗試都無法滿足此功能。然后就考慮到使用分很多段去話弧,每段弧一個顏色來實現。
剛開始使用zrender,zrender是用于echarts的開發庫,可能因為不熟悉,做出來鋸齒非常大。感覺沒法解決。就想到了svg以及d3.js。

實現代碼

如下代碼實現上圖的效果,經過跟阿里的datav中的弧形柱圖組件對比,相差不是太大。看了下datav的實現,思路是一致的。至于鋸齒方便,總感覺要比datav上面的差一點點

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .content {
                position: relative;
                left: 0%;
                width: 400px;
                height: 400px;
                background: rgba(0, 197, 209, 0.4);
                overflow: hidden;
            }
        </style>
    </head>

    <body style="background: #0E2A42;">
        <div id="content" class="content">
        </div>
    </body>
    <script src="d3.v5.min.js"></script>
    <script>
        var curved_column = {
            width: 400,
            height: 400,
            draw: function() {
                this.content = document.getElementById('content')

                this.svg = d3.select(this.content).append('svg').attr('width', this.width).attr('height', this.height)
                this._initDom()
            },
            _initDom: function() {
                var fd = 270 // 分段數
                this.g = this.svg.append("g")
                    .attr("transform", "translate(200, 200)");
                var compute = d3.interpolate('#FF0000', '#0B16FD');
                var linear = d3.scaleLinear()
                    .domain([0, fd])
                    .range([0, 1]);
                var pie = d3.pie()
                    .value(function(d) {
                        return d;
                    })
                    .sort(null)
                    .startAngle(0)
                    .endAngle(1.5 * Math.PI)
                    
                var arc = d3.arc()
                    .innerRadius(85)
                    .outerRadius(100);
                
                var data = [];
                for (var i = 0 ; i < fd ; i++) {
                    data.push(i)
                }
                this.g.datum(data).selectAll('path')
                    .data(pie)
                    .enter()
                    .append("path")
                    .attr("d", arc)
                    .style("fill", function (d, i) {
                        return compute(linear(d.value));
                    })
                    .style("stroke", function (d, i) {
                        return compute(linear(d.value));
                    })
            }
        }
        curved_column.draw()
    </script>
</html>
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • d3 (核心部分)選擇集d3.select - 從當前文檔中選擇一系列元素。d3.selectAll - 從當前文...
    謝大見閱讀 3,471評論 1 4
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,090評論 25 708
  • echarts 原生是不支持弧形漸變的,本文只是取巧,利用線性漸變 linear 實現視覺上的弧形漸變。適用于以弧...
    KrisLeeSH閱讀 16,729評論 0 3
  • 經過了3個月的開發,MXNet 0.11版本終于發布了,其中也發布了最為重要的一個更新,動態圖接口Gluon,李沐...
    SherlockLiao閱讀 10,755評論 4 8
  • 人類文明在不斷進步,我們的精神文明和物質文明都在不斷進步,這種進步的目的,是什么?是讓我們,活的,更好,更快樂嗎?...
    簡柴先生閱讀 629評論 0 1