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

我正在尝试制作一个带有正确动画的

圆柱形液体填充计。

错误：图表中的波形和动画存在问题

我在plunker中试用过。

我正在连接我的plunker链接：

请帮助我改进它的动画和代码

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);

---

“有些”问题不是很有帮助的描述。如果您能正确地描述它，我将不胜感激。我已经在上面提到了错误。没有对问题的描述，一旦您修复代码，问题将消失，未来的读者将无法参考最初的问题以查看他们的问题是否适用。除非你愿意冻结你链接的代码，只要它还存在。