Dimple.js餅圖標籤的平滑動畫？

我想要餅圖的切片內的標籤。我使用的John Kiernander's answer to another question修改後的版本與要做到這一點：

mySeries.afterDraw = function (shape, data) { 
    console.log(myStoryboard) 
     var ctd = getCentroid(data, myChart), 
      s = d3.select(shape), 
      degrees = ((data.startAngle + (data.endAngle - data.startAngle)/2) * 180)/Math.PI; 
     if (degrees < 180) { 
      degrees -= 90; 
     } else { 
      degrees += 90; 
     } 
     if (Math.abs(data.startAngle - data.endAngle) > 0.25) { 
      myChart._group.append("text") 
        .attr("id","innerLabel") 
       .attr("transform", "rotate(" + degrees + ", " + ctd[0] + ", " + ctd[1] + 4 + ")") 
       .attr("dy", "0.35em") 
       .attr("x", ctd[0]) 
       .attr("y", ctd[1]) 
       .style("text-anchor", "middle") 
       .style("pointer-events", "none") 
       .text(data.aggField[0]); 
     } 
    };

的問題是，我也想動畫餅圖，顯示了片隨時間變化的大小。

採用上述方法要求我刪除，並重新繪製文本每個刻度：

myStoryboard.onTick = function (e) { 
    svg.selectAll("#innerLabel").remove(); 
     }

所以每剔這些標籤遭到移除並重新繪製。不幸的是，刪除和重繪它們所需的時間在FF中非常明顯（Chrome和IE都不會渲染頁面），遠遠超出了閃爍效果。是否有隱藏的延遲，我可以減少？否則，是否有辦法加快速度或平滑地動畫文本本身？

數據集非常小，只有15kb，所以如果真的需要這麼長時間才能刪除並重新繪製標籤，我會很驚訝。餡餅最多有11片。

我是一個超新手用Javascript，所以我希望有一個簡單的方法來減少閃爍。嘗試平滑地動畫文字似乎有問題，因爲您希望文字與故事板同步移動。

謝謝！

來源

2015-10-15 David R

您可以發佈您的'getCentroid'函數嗎？我無法幫您解決問題，但我試圖複製相同類型的行爲，這對於這個新手來說非常有用 –

您可以getCentroid函數有函數getCentroid（data，plot）var centerX = plot.x + plot.width/2， cen ter = plot.y + plot.height/2， angle =（data.startAngle +（data.endAngle - data.startAngle）/ 2）， hyp =（data.innerRadius +（data.outerRadius - data.innerRadius）/2）， opp = Math.sin（angle）* hyp， adj = Math.cos（angle）* hyp; return [centerX + opp，centerY - adj]; } –

我查看了代碼，看起來問題在於標準故事板playthrough是將FrameDuration的一半花費在固定狀態，一半FrameDuration從一個狀態轉移到另一個狀態。問題在於，在圖表的運動過程中，標籤不存在，因此標籤的一半時間不存在，標籤沒有時間的一半。

我花了大約一個小時，試圖弄清楚如何通過使用dimple方法來延長凍結狀態的時間，但可惜我是「ma d3/javaScript新手，最終只是分手並重寫了_goToFrame方法：

myStoryboard._goToFrameIndex = function (index) { 
    this._frame = index % this._getCategories().length; 
    // Draw it with half duration, we want the effect of a 20% animation 80% pause. 
    this.chart.draw(this.frameDuration/5); 
    };

來源

2015-10-15 23:58:23

Dimple.js餅圖標籤的平滑動畫？

回答

相關問題