Watermark Error d3.js

Question

I got a water chart, which used circular usage meters, in rectangular stripes, but the clipping path does not occupy the entire height of the chart.

//Problems

1. The axis text does not wrap cleanly -- I need it to do so to make it legible.
2. The rectangle is more of a square -- it needs to be more "bar chart" like - consume more vertical space but render correctly.

- the difference between these two jsfiddles is just the config1.fillShape parameter. - rect / circle

// version with a broken rod

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

// working version of the old round caliber

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

main functions for the clip area - clipArea and drawShapeWave

clipArea function

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

  if (config.fillShape == "circle") {
    clipArea
      .y1(function(d) {
        return (fillCircleRadius * 2 + waveHeight);
      });
  } else {
    clipArea
      .y1(function(d) {
        return (fillCircleRadius * 2 + waveHeight);
      });
    //.y1(function(d) { return (config.height - (fillCircleRadius * 2) + waveHeight); } );
  }

and drawShape

  var drawShapeWave = function(shape) {
    // Draw the wave shape.

    if (shape == "circle") {
      fillGroup.append("circle")
        .attr("cx", radius)
        .attr("cy", radius)
        .attr("r", fillCircleRadius);
    } else {
      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));
    }

    fillGroup
      .style("fill", config.waveStartColor)
      .transition()
      .duration(config.waveColorDuration)
      .style("fill", config.waveColor);
  }

// Perhaps this code example has a solution.

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

---

Update

I deleted some code to leave only a square map of water

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

---

, - - - - - .

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

---

2 - 12/09/2017

g - 70 90 - .. , - - - .

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

Answer 1

(jsfiddle.net/0ht35rpb/145), , :

fillGroup.append("rect")
    .attr("x", config.width-5)
    .attr("y", 0)
    .attr("width", config.width)
    .attr("height", config.height)

( ), x, y, width height:

fillGroup.append("rect")
    .attr("x", config.width - 5 + config.margin)
    .attr("y", config.margin)
    .attr("width", config.width - 2 * config.margin)
    .attr("height", config.height - 2 * config.margin)

, .