d3液体图表错误

Question

我已经删除了一些代码，只留下方形水图本身。这是基于d3v3版本的水位计。你怎么把它变成条形/矩形形状 - 而不是方形？

http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6

//当前的jsfiddle

http://jsfiddle.net/0ht35rpb/141/

所以我认为需要修改的部分是

    // The clipping wave area.
    const clipArea = d3.area()
        .x(function(d) { return waveScaleX(d.x); } )
        .y0(function(d) { return waveScaleY(Math.sin(Math.PI*2*config.waveOffset*-1 + Math.PI*2*(1-config.waveCount) + d.y*2*Math.PI));} );

        clipArea
            .y1(function(d) { return (fillCircleRadius * 2 + waveHeight); } );
            //.y1(function(d) { return (config.height - (fillCircleRadius * 2) + waveHeight); } );

和

            fillGroup.append("rect")
                .attr("x", radius - fillCircleRadius)
                .attr("y", radius - fillCircleRadius)
                .attr("width", fillCircleRadius * 2)
                .attr("height", fillCircleRadius * 2)
                //.attr("height", config.height - (fillCircleRadius * 2));

我有一个旧的条形图变体在这里工作..也许这样的东西可以帮助 - 任何善于逆向工程的人...如何正确地剪辑路径等...

http://jsfiddle.net/NYEaX/1860/