使用d3.js，如何制作圆柱形液体填充量规？

Question

我正在尝试使用cylindrical liquid fill gauge

制作correct animation.

错误：图表中的wave和动画存在问题。

我在plunker .

中尝试过

我附加了我的plunker链接：http://plnkr.co/edit/Jl2ACdmxd99I3b9539t7?p=preview

请帮助我改进动画和代码？

code:-
--------------
    // The clipping wave area.
                var clipArea = d3.area()
                  .x(function(d) {
                      return waveScaleX(d.x);
                  })
                  .y0(function(d) {
                      return waveScaleY(Math.sin(Math.PI * 2 * config.get("waveOffset") * -1 + Math.PI * 2 * (1 - config.get("waveCount")) + d.y * 2 * Math.PI));
                  })
                  .y1(function(d) {
                      return (fillCircleRadius * 2 + waveHeight);
                  });

                var gaugeGroupDefs = gaugeGroup.append("defs");

                var clipId = idGenerator("clipWave");
                var waveGroup = gaugeGroupDefs
                  .append("clipPath")
                  .attr("id", clipId);
                var wave = waveGroup.append("path")
                  .datum(data)
                  .attr("d", clipArea);