Appending svg solved the issue

Question

In my d3 plot, this is the code and the rendered plot.

As you can see the lines go into the y axis. I was looking for a solution and by chance I appended an svg making the code look like this:

Now the lines are not overlapping the y axis. Why is that exactly?

Note: I changed the width of the appended svg but still the box fits perfectly.

Answer 1

Your paths start at an x position of -25.334... rather than 0, so if translate them horizontally by 30, they will start at 4.666..., which overlaps with your axis. If you put them inside that inner svg element, they will get clipped at the bounds of the svg element and will start at 30 (after translation).

You can disable the clipping by setting an overflow attribute: <svg width="1096" height="160" overflow="visible">.