Q:

d3.js svg elements not transitioning properly after window resize

I'm trying to create an interactive histogram with a y-axis that rescales when receiving new data. The behavior works properly on the initial display, but if the window is resized, the y-axis and histogram bars extend past the svg (or shrink). I have a working fiddle demonstrating the troublesome behavior here:
https://fiddle.jshell.net/pyzvo3yy/
I have a feeling this is happening because I'm using viewBox in conjunction with manually fetching client widths/heights used to redefine the scales, but I'm not certain...

A:

For initial is OK but update has trouble, codes below are added to update. See this jsfiddle
d3.select('#score-histogram').select('svg')
  .attr('viewBox', '0 0 ' + cWidth + ' ' + cHeight);

g.select('.xaxis')
  .attr('transform', 'translate(0,' + height + ')')
  .call(xAxis);

