CODEWITHSUNDEEP
javascriptd3.jsdata-visualizationgraph-visualization
Sriharsha Puranik
Sriharsha Puranik

Reputation: 1

With text labels for ticks in linear scale, zoom causes lables to extend beyond axis

I created a d3 plot with linear scale x axis. I placed text label on xaxis using tickFormat().

When I zoom the plot, the tick values extend beyond xaxis. How do I make the ticks (with text labels) beyond xaxis (svg rect) disappear?

var xAxis = d3.svg.axis().scale(x)
  .orient("bottom")
  .tickValues(idForXAxis)
  .tickFormat(function(d,i){ return valuesForXAxis[i] })

Fiddle: https://jsfiddle.net/wicedp/q1b2dsdt/4/

Upvotes: 0

Views: 632

Answers (2)

Sriharsha Puranik
Sriharsha Puranik

Reputation: 1

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

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

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

This way I think xaxis was getting correctly translated and clipped. Here is the fiddle - https://jsfiddle.net/wicedp/q1b2dsdt/12/

Upvotes: 0

Gerardo Furtado
Gerardo Furtado

Reputation: 102208

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:

xAxis.ticks(idForXAxis.length)

And then, inside your zoomed function:

xAxis.ticks(idForXAxis.length/d3.event.scale);

Here is the updated fiddle: https://jsfiddle.net/pfrdvLtx/

Upvotes: 1

Related Questions