如何从最后一个半径完成绘制

Question

我需要在绿色半径的继续处绘制。

我尝试以相同的半径绘制，但是值从角度 0 开始，但我需要从绿色的端角开始绘制。

<!DOCTYPE html>
<head>
    <meta HTTP-EQUIV="X-UA-COMPATIBLE" CONTENT="IE=EmulateIE9" >
    <script type="text/javascript" src="scripts/d3.min.js"></script>

    <link type="text/css" rel="stylesheet" href="styles/style.css">

    <style>

        body {
            background-color: #FFFFFF;
        }


        #outer {
            background:#FFFFFF;
            border-radius: 5px;
            color: #000;
        }

        #div2{
            width: 100%;
            height: 200px;
            box-sizing: border-box;
            float: left;

        }

        #div2 .arc {
            stroke-weight: 0.1;
            fill: #16A765;

        }

        #div2 .arc2 {
            stroke-weight: 0.1;
            fill: #777777;

        }
        #div2 .arc3 {
            stroke-weight: 0.1;
            fill: #EE9A00;

        }

        #div2 .arc4 {
            stroke-weight: 0.1;
            fill: #7171C6;

        }


        .radial {
            border-radius: 3px;
            background: #FFFFFF;
            color: #000;
            display: none;

        }


    </style>
</head>

<body>

<div id='outer' style="margin-top:40px; padding:10px">
    <div id="main" style="width:600; height:200px; margin: 0px auto; ">
        <div id="div2"></div>
    </div>
</div>



<script language="JavaScript">



    start();



    function labelFunction(val,min,max) {

    }

    function deselect() {
        div2.attr("class","radial");
    }

    function start() {

        var rp2 = radialProgress(document.getElementById('div2'))
                .diameter(250)

                //verd
                .value(15000)
                //gris
                .value2(30000)
                //taronja
                .value3(15000)
                //blau
                .value4(35000)

                .render();
    }

    function radialProgress(parent) {
    var _data=null,
        _duration= 1000,
        _selection,
        _margin = {top:0, right:0, bottom:0, left:0},
        __width = 300,
        __height = 300,
        _diameter = 150,
        _label="",
        _fontSize=10;

    var _mouseClick;

    var _value  = 0,
        _value2 =0,
        _value3 =0,
        _value4 =0,
        _minValue = 0,
        _maxValue = 86400;

    var  _currentArc= 0, _currentArc2= 0, _currentArc3= 0, _currentArc4=0, _currentValue=0;

    var _arc = d3.svg.arc()
        .startAngle(0 * (Math.PI/180)); //just radians

    var _arc2 = d3.svg.arc()
        .startAngle(0 * (Math.PI/180))
        .endAngle(0); //just radians

    var _arc3 = d3.svg.arc()
        .startAngle(0 * (Math.PI/180))
        .endAngle(0); //just radians


    var _arc4 = d3.svg.arc()
        .startAngle(0 * (Math.PI/180))
        .endAngle(0); //just radians

    _selection=d3.select(parent);


    function component() {

        _selection.each(function (data) {

            // Select the svg element, if it exists.
            var svg = d3.select(this).selectAll("svg").data([data]);
            var enter = svg.enter().append("svg").attr("class","radial-svg").append("g");

            measure();

            svg.attr("width", __width)
               .attr("height", __height);


            var background = enter.append("g").attr("class","component")
                .on("click",onMouseClick);


            _arc.endAngle(360 * (Math.PI/180))

            background.append("rect")
                .attr("class","background")
                .attr("width", _width)
                .attr("height", _height);

            background.append("path")
                .attr("transform", "translate(" + _width/2 + "," + _width/2 + ")")
                .attr("d", _arc);


            _arc.endAngle(_currentArc);

            enter.append("g").attr("class", "arcs");
            var path = svg.select(".arcs").selectAll(".arc").data(data);
            path.enter().append("path")
                .attr("class","arc")
                .attr("transform", "translate(" + _width/2 + "," + _width/2 + ")")
                .attr("d", _arc);


            var path2 = svg.select(".arcs").selectAll(".arc2").data(data);
            path2.enter().append("path")
                .attr("class","arc2")
                .attr("transform", "translate(" + _width/2 + "," + _width/2 + ")")
                .attr("d", _arc2);


            var path3 = svg.select(".arcs").selectAll(".arc3").data(data);
            path3.enter().append("path")
                .attr("class","arc3")
                .attr("transform", "translate(" + _width/2 + "," + _width/2 + ")")
                .attr("d", _arc3);

            var path4 = svg.select(".arcs").selectAll(".arc4").data(data);
            path4.enter().append("path")
                .attr("class","arc4")
                .attr("transform", "translate(" + _width/2 + "," + _width/2 + ")")
                .attr("d", _arc4);


            enter.append("g").attr("class", "labels");
            var label = svg.select(".labels").selectAll(".label").data(data);
            label.enter().append("text")
                .attr("class","label")
                .attr("y",_width/2+_fontSize/3)
                .attr("x",_width/2)
                .attr("width",_width)
                // .attr("x",(3*_fontSize/2))
                .style("font-size",_fontSize+"px")
                .on("click",onMouseClick);

            path.exit().transition().duration(500).attr("x",1000).remove();

            layout(svg);

            function layout(svg) {

                var ratio4=(_value4-_minValue)/(_maxValue-_minValue);
                var ratio3=(_value3-_minValue)/(_maxValue-_minValue);
                var ratio2=(_value2-_minValue)/(_maxValue-_minValue);
                var ratio=(_value-_minValue)/(_maxValue-_minValue);
                var endAngle=Math.min(360*ratio,360);
                endAngle=endAngle * Math.PI/180;

                path.datum(endAngle);
                path.transition().duration(_duration)
                    .attrTween("d", arcTween);



                    path2.datum(Math.min(360*(ratio2),360) * Math.PI/180);
                    path2.transition().delay(_duration).duration(_duration)
                        .attrTween("d", arcTween2);


                    path3.datum(Math.min(360*(ratio3),360) * Math.PI/180);
                    path3.transition().delay(_duration).duration(_duration)
                        .attrTween("d", arcTween3);

                    path4.datum(Math.min(360*(-ratio4),360) * Math.PI/180);
                    path4.transition().delay(_duration).duration(_duration)
                        .attrTween("d", arcTween4);


                label.datum(Math.round(ratio*100));
                label.transition().duration(_duration)
                    .tween("text",labelTween);

            }

        });

        function onMouseClick(d) {
            if (typeof _mouseClick == "function") {
                _mouseClick.call();
            }
        }
    }

    function labelTween(a) {
        var i = d3.interpolate(_currentValue, a);
        _currentValue = i(0);

        return function(t) {
            _currentValue = i(t);
           this.textContent = "";
        }
    }

    function arcTween(a) {
        var i = d3.interpolate(_currentArc, a);

        return function(t) {
            _currentArc=i(t);
            return _arc.endAngle(i(t))();
        };
    }

    function arcTween2(a) {
        var i = d3.interpolate(_currentArc2, a);

        return function(t) {
            return _arc2.endAngle(i(t))();
        };
    }

    function arcTween3(a) {
        var i = d3.interpolate(_currentArc3, a);

        return function(t) {
            return _arc3.endAngle(i(t))();
        };
    }

    function arcTween4(a) {
        var i = d3.interpolate(_currentArc4, a);

        return function(t) {
            return _arc4.endAngle(i(t))();
        };
    }


    function measure() {
        _width=_diameter - _margin.right - _margin.left - _margin.top - _margin.bottom;
        _height=_width;
        _fontSize=_width*.2;

        _arc.outerRadius(_width/2);
        _arc.innerRadius(_width/2 * .70);

        _arc2.outerRadius(_width/2 * .70);
        _arc2.innerRadius(_width/2 * .70 - (_width/2 * .15));

        _arc3.outerRadius(_width/2 * .55);
        _arc3.innerRadius(_width/2 * .55 - (_width/2 * .15));

        _arc4.outerRadius(_width/2 * .99);
        _arc4.innerRadius(_width/2 * .99 - (_width/2 * .0,5));
    }


    component.render = function() {
        measure();
        component();
        return component;
    }

    component.value = function (_) {
        if (!arguments.length) return _value;
        _value = [_];
        _selection.datum([_value]);
        return component;
    }
    component.value2 = function (_) {
        if (!arguments.length) return _value2;
        _value2 = [_];
        _selection.datum([_value2]);
        return component;
    }
    component.value3 = function (_) {
        if (!arguments.length) return _value3;
        _value3 = [_];
        _selection.datum([_value3]);
        return component;
    }
    component.value4 = function (_) {
        if (!arguments.length) return _value4;
        _value4 = [_];
        _selection.datum([_value4]);
        return component;
    }

    component.margin = function(_) {
        if (!arguments.length) return _margin;
        _margin = _;
        return component;
    };

    component.diameter = function(_) {
        if (!arguments.length) return _diameter
        _diameter =  _;
        return component;
    };

    component.minValue = function(_) {
        if (!arguments.length) return _minValue;
        _minValue = _;
        return component;
    };

    component.maxValue = function(_) {
        if (!arguments.length) return _maxValue;
        _maxValue = _;
        return component;
    };

    component.label = function(_) {
        if (!arguments.length) return _label;
        _label = _;
        return component;
    };

    component._duration = function(_) {
        if (!arguments.length) return _duration;
        _duration = _;
        return component;
    };

    component.onClick = function (_) {
        if (!arguments.length) return _mouseClick;
        _mouseClick=_;
        return component;
    }

    return component;

}





</script>

</body>
</html>

这里是实际径向图的图片：

Actual

Answer 1

您需要指定 arc4 的起始角度，即绿色路径的结束角度：

_arc4.startAngle(endAngle);//endangle of the green path

下一个变化：

tween中的开始位置应该是上面设置的，即绿色圆弧的结束角度。

function arcTween4(a) {
    var i = d3.interpolate(_arc4.startAngle()(), a);//start from endangle 

    return function(t) {
        return _arc4.endAngle(i(t))();
    };
}

工作代码here

希望对您有所帮助！

如何从最后一个半径完成绘制

How to draw from the last radius finish

javascript

css

charts

d3.js

donut-chart