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饼图标签的平滑动画？

回答

相关问题