Javascript 使用d3js在半圆圆环图中从右向左绘制进度路径

我想创建一个显示完成百分比的半圆圆环图。但要求是从右到左绘制百分比映射，而不是从左到右。下面是我的代码

var percent = 30;        


    var ratio=percent/100;

    var pie=d3.layout.pie()
            .value(function(d){return d})
            .sort(null);

    var w=300,h=300;

    var outerRadius=(w/2)-10;
    var innerRadius=85;


    var color = ['#ececec','#f06b3e','#888888'];

    var colorOld='#F00';
    var colorNew='#0F0';

    var arc=d3.svg.arc()
            .innerRadius(innerRadius)
            .outerRadius(outerRadius)
            .startAngle(0)
            .endAngle(Math.PI);


    var arcLine=d3.svg.arc()
            .innerRadius(innerRadius)
            .outerRadius(outerRadius)
            .startAngle(0);

    var svg=d3.select("#chart")
            .append("svg")
            .attr({
                width:w,
                height:h,
                class:'shadow'
            }).append('g')
            .attr({
                transform:'translate('+w/2+','+h/2+')'
            });



    var path=svg.append('path')
            .attr({
                d:arc,
                transform:'rotate(-90)'
            }).attr({
                'stroke-width':"1",
                stroke:"#666666"
            })
            .style({
                fill:color[0]
            });


    var pathForeground=svg.append('path')
            .datum({endAngle:0})
            .attr({
                d:arcLine,
                transform:'rotate(-90)'
            })
            .style({
                fill: function (d,i) {
                    return color[1];
                }
            });


    var middleCount=svg.append('text')
            .datum(0)
            .text(function(d){
                return d;
            })
            .attr({
                class:'middleText',
                'text-anchor':'middle',
                dy:0,
                dx:5
            })
            .style({
                fill:d3.rgb('#000000'),
                'font-size':'60px'



            });

    var oldValue=0;
    var arcTween=function(transition, newValue,oldValue) {
        transition.attrTween("d", function (d) {
            var interpolate = d3.interpolate(d.endAngle, ((Math.PI))*(newValue/100));

            var interpolateCount = d3.interpolate(oldValue, newValue);

            return function (t) {
                d.endAngle = interpolate(t);
                middleCount.text(Math.floor(interpolateCount(t))+'%');
                arcLine=d3.svg.arc()
            .innerRadius(innerRadius)
            .outerRadius(outerRadius)
            .startAngle(function(){
                return (newValue * (Math.PI / 180));
            });
            return arcLine(d);
            };
        });
    };


pathForeground.transition()
        .duration(0)
        .ease('cubic')
        .call(arcTween,percent,oldValue);

在上面的代码中，我们使用svg:path绘制了一个半圆甜甜圈图，然后再次绘制另一个svg:path以指示从左到右的完成百分比

---

如何使用d3js从右到左而不是从左到右绘制百分比指示器？

首先，你的弧线上有一个

旋转（90）

，打破了我的大脑，所以我将其移除。现在让我们开始思考我们的角度在哪里。基本上，您希望从

Math.PI/2

开始设置动画，然后返回到0。然后，数学结果如下所示：

下面是一些正在运行的代码：

单击图表重新设置动画！
var percent=Math.random（）*100；
var pie=d3.layout.pie（）
.价值（功能（d）{
返回d
})
.sort（空）；
var w=300，
h=300；
外部变量=（w/2）-10；
var内半径=85；
var color=['#ececec'、'#f06b3e'、'#8888888']；
var colorOld='#F00'；
var colorNew='#0F0'；
var arc=d3.svg.arc（）
.innerRadius（innerRadius）
.outerRadius（outerRadius）
.startAngle（0）
.端角（数学PI）；
var arcLine=d3.svg.arc（）
.innerRadius（innerRadius）
.outerRadius（outerRadius）；
var svg=d3。选择（“图表”）
.append（“svg”）
艾特先生({
宽度：w，
高度:h,，
班级：'影子'
}).append（'g'）
艾特先生({
转换：'translate（'+w/2+'，'+h/2+'）'
})
.on（'单击'，函数（））{
pathForeground.transition（）
.持续时间（1000）
.ease（‘立方’）
.call（arcTween，Math.random（）*100,0）；
});
var path=svg.append（'path'）
艾特先生({
d:圆弧，
变换：“旋转（-90）”
})艾特先生({
“笔划宽度”：“1”，
笔划：“666666”
})
.风格({
填充：颜色[0]
});
var pathForeground=svg.append（'path'）
.基准({
端角：0
})
.风格({
填充：功能（d，i）{
返回颜色[1]；
}
});
var middleCount=svg.append（'text'）
.基准面（0）
.文本（功能（d）{
返回d；
})
艾特先生({
类：'middleText'，
“文本锚定”：“中间”，
dy:0,，
dx:5
})
.风格({
填充：d3.rgb（'#000000'），
“字体大小”：“60px”
});
var-oldValue=0；
var arcTween=函数（转换、新值、旧值）{
转换属性（d），函数（d）{
arcLine.startAngle（数学PI/2）；
var interpolate=d3.interpolate（Math.PI/2，（Math.PI/2）-（Math.PI*（newValue/100））；
var interpolateCount=d3.插值（旧值、新值）；
返回函数（t）{
d、 端角=内插（t）；
文本（数学地板（插值计数（t））+'%'；
返回弧线（d）；
};
});
};
pathForeground.transition（）
.持续时间（1000）
.ease（‘立方’）
.调用（arcTween，百分比，旧值）；

您确定这正是您现在想要的吗？因为当我在你的过渡中添加了一个非0的持续时间时，动画非常古怪@NathanInchey我的意图是根据百分比值绘制从半圆右端到左端的进度，但没有成功。我将arcTween中arcLine对象的startAngle（）从0调整为newValue*（Math.PI/180），这就是为什么它会这样执行。如果我再次将其更改为0，代码将正常工作。我需要180度的星际缠结图，然后向左转。例如，如果我需要绘制的百分比值是30，那么它应该从半圆形的180度开始向左绘制30%。如果我们必须从左到右显示进度，需要做哪些更改？