D3.js 弯曲的荧光棒

d3.js，弯曲

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2632
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var half_donut = {
    w: 500,
    h: 500,
    r: 240,
    pi: Math.PI,
    max: 5,
    selector: "body",

color: null,
    svg: null,
    gradient: null,
    g: null,
    pie: null,
    arc: null,

init: function(selector) {
        this.selector = selector;
        this.color = d3.scale.category20c();
        this.doSVG();
        this.doGradient();
        this.doG();

},
    doSVG: function() {
        this.svg = d3.select(this.selector).append("svg");
    },
    doGradient: function() {

this.gradient = this.svg.append("svg:defs")
            .append("svg:linearGradient")
            .attr("id", "gradient")
            .attr("x1", "0%")
            .attr("y1", "50%")
            .attr("x2", "100%")
            .attr("y2", "50%")
            .attr("spreadMethod", "pad");

this.gradient.append("svg:stop")
            .attr("offset", "0%")
            .attr("stop-color", "#6cc9fe")
            .attr("stop-opacity", 1);

this.gradient.append("svg:stop")
            .attr("offset", "50%")
            .attr("stop-color", "#42d390")
            .attr("stop-opacity", 1);

this.gradient.append("svg:stop")
            .attr("offset", "100%")
            .attr("stop-color", "#38d577")
            .attr("stop-opacity", 1);

},
    doG: function() {
        this.g = this.svg
            .attr("width", this.w)
            .attr("height", this.h)
            .append("svg:g")
            .attr("id", "semi-donut")
            .attr("transform", "translate(" + this.r + "," + this.r + ")")
    },
    doArc: function() {
        this.arc = d3.svg.arc()
            .outerRadius(this.r)
            .innerRadius(this.r - 20)
            .cornerRadius(20)
            .startAngle(function(d) {
                return -this.pi / 2;
            })
            .endAngle(function(d) {
                return d.startAngle + (this.pi * d.value / this.max);
            });
    },
    doPie: function() {
        console.log('doPie');
        this.pie = d3.layout.pie()
            .value(function(d) {
                return d.value;
            })
            .startAngle(function(d) {
                return -90 * (this.pi / 180);
            })
            .endAngle(function(d) {
                return 90 * (this.pi / 180);
            });
    },
    render: function() {
        console.log("render");
        var that = this;
        var slice = this.g.selectAll("path.slice")
            .data(this.pie(this.data));

slice.enter()
            .insert("path")
            .style('fill', 'url(#gradient)')
            .attr("class", "slice");

slice
            .transition().duration(1000)
            .attrTween("d", function(d) {
                this._current = this._current || d;

var interpolate = d3.interpolate(this._current, d);
                this._current = interpolate(0);
                return function(t) {
                    console.log('interpolate');
                    return that.arc(interpolate(t));
                };
            })

slice.exit()
            .remove();

},
    draw: function(data) {
        console.log("draw");
        this.data = data;
        this.doPie();
        this.doArc();
        this.render();
    }
};

half_donut.init("#chart");
half_donut.draw([{
    label: "whatever",
    value: 1
}]);

$("#selector").change(function() {
    var $this = $(this);
    half_donut.draw([{
        label: "whatever",
        value: $this.val()
    }]);
});

编译

CSS

HTML

d3.js，弯曲

编辑器支持Emmet

快捷键

d3.js，弯曲

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：