創建一個圓形進度條，但動畫arc.endAngle（角度> 180度）停止在d3.js工作

Question

我正在運行D3.js以圓形繪製進度條，您將在jsfiddle上看到demo，進度條有一個過渡動畫。

主要代碼

var width = 960, 
    height = 500, 
    twoPi = 2 * Math.PI, 
    progress = 0, 
    total = 1308573, // must be hard-coded if server doesn't report Content-Length 
    formatPercent = d3.format(".0%"); 

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

var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height) 
    .append("g") 
    .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 

var meter = svg.append("g") 
    .attr("class", "progress-meter"); 

meter.append("path") 
    .attr("class", "background") 
    .attr("d", arc.endAngle(twoPi)); 

var foreground = meter.append("path") 
    .attr("class", "foreground"); 

foreground.attr("d", arc.endAngle(twoPi * 0)) 

foreground.transition().duration(1500).attr("d", arc.endAngle(twoPi * 2/3 ));  

var text = meter.append("text") 
    .attr("text-anchor", "middle") 
    .attr("dy", ".35em"); 

使進度條的舉動，我們只需要更改爲arc.endAngle（），這是就行了。

foreground.transition().duration(1500).attr("d", arc.endAngle(twoPi * 2/3 )); 

如果角度小於180，（endangle < twoPi * 1/2），則該動畫工作正常，但當角度大於180°，因此意味着endangle> = twoPi *2分之1 。那麼動畫將不會顯示出來，如果你看一下控制檯，你會發現許多錯誤，在d3.js

Error: Problem parsing d="M1.1633760361312584e-14,-190A190,190 0 1.481481481481482e-7,1 -0.000022772330200401806,-189.9999883969182L0,0Z" meeting.html:1 
2 
Error: Problem parsing d="M1.1633760361312584e-14,-190A190,190 0 2.56e-7,1 -0.00003935058659476369,-189.99997994987467L0,0Z" 

所以究竟是什麼確切的問題，該如何解決呢

Answer 1

一點也沒有不起作用，因爲您無法對徑向路徑使用標準轉換。默認情況下，它只是插入數字而不知道它們代表什麼，所以在你的情況下，最終會得到一些非常小的數字（例如1.1633760361312584e-14），這些數字是以指數表示法表示的，這對SVG路徑無效。

的解決方案是使用一個知道如何插值弧自定義補間功能：

function arcTween() { 
    var i = d3.interpolate(0, twoPi * 2/3); 
    return function(t) { 
    return arc.endAngle(i(t))(); 
    }; 
} 

完整的示例here。您可能還對this example感興趣，它會顯示如何使用綁定到路徑的數據執行此操作。