D3 Chart Is Going Out Of The Box, Last Circle Is Not Coming Properly

My Chart is going out of the box, If you notice last circle is cutting and going out of the described width, I have tried to give transform but it's not looking good, scatter .ap

Solution 1:

It looks like the width of your clip path is the problem:

svg
  .append("defs")
  .append("SVG:clipPath")
  .attr("id", "clip")
  .append("SVG:rect")
  .attr("width", containerWidth)
  .attr("height", height)
  .attr("x", 40)
  .attr("y", 0);

It's currently at the same width as your overall SVG container, when it should be the width of the chart clip area (i.e. containerWidth - margin.left - margin.right). It's offset from the left with .attr("x", 40) so it's still clipping the line and circles from the left, but this means that it's extending beyond the right edge of the SVG by 40px so it's not clipping anything on the right side.

Try changing .attr("width", containerWidth) to .attr("width", width).

Solution 2:

After discussion in the comments provided for answer by richardwestenra, we came up with an alternative solution which reduces the margin.right from the width in a number of places to make the plot appear within the drawing area and not be clipped by the clip path.

The solution is at https://codesandbox.io/s/vigorous-mcclintock-hsmgu