Accepted answer

I am not sure without a fiddle but, svg initially did not have z-index. Elements were layered based on the DOM tree. So last drawn is shown on top. In your case I see:

this.xAxis = this.svg.append('g')...


this.yAxis = this.svg.append('g')..

Now instead of adding them as g elements directly on the svg, would you try creating an wrapper g for both axes:

this.wrapper = this.svg.append('g');

then instead of the above 2, do:

this.xAxis = this.wrapper.append('g')...

Make sure the wrapper g element is added before you add your elements.does that mitigate the issue?

For your other questions,

2 - there are multiple ways to make it responsive, one of the easiest is to use preserveAspectRatio="none" attribute on your svg and then control the div or whatever element that wraps your svg using css media queries. If you mean changing the way the axes etc is drawn, then you have to call an update function that will update these elements on window "resize" event.

3 - Use Math.max and Math.min when setting your x, y or width height or transform attributes on your chart like

.attr("height",function(d,i){return Math.min(someMin,someScale(d))})

Related Query

More Query from same tag