I was able to fix the problem by adding this piece of code -

var clipX = svg.append("clipPath")
  .attr('id', 'clip-x-axis')
  .attr('x', -10)
  .attr('y', 0)
  .attr('width', width)
  .attr('height', margin.bottom);

.attr("class", "x axis")
.attr('clip-path', 'url(#clip-x-axis)')
.attr("transform", "translate(0, " + height + ")")
.selectAll(".tick text")
  .call(wrap, 0);

This way I think xaxis was getting correctly translated and clipped. Here is the fiddle -


The problem here is not tickFormat. You can easily find the culprit: remove tickValues and the ticks will stay within the range.

The best idea is simply letting D3 generates the ticks. But, if you want to show all the values in the valuesForXAxis array in the original view and still have a zoom behaviour formatting the ticks, there is a workaround. Set the tick number as the number of values inside valuesForXAxis array:


And then, inside your zoomed function:


Here is the updated fiddle:

Related Query

More Query from same tag