hiding axis tick if overlapping

[saad....@visiercorp.com]

Hello,

I am running into this issue of overlapping of labels (see attached screenshot), incase of overlapping my requirement is to hide the tick label and show the one i have for my mark rule (blue dotted line and blue label).Please suggest something, i tried getting the rendered ticks and see if my line's label value is equal or in range between the tick label then do some hiding event (which i am not sure of at this point). But the problem is i can't get the rendered number of ticks and their values.

Thanks,

[Roy I]

One simple solution is to create a solid background for the blue text to cover everything underneath including the existing tick labels.  For example, use a mark rect with fill color white and opacity 1.0 that moves with the blue text.

If you need more help, please post your example Vega spec.

[Harton Wong]

Hi Roy,

Just wondering, is there a way to know the axis tick label that is created by Vega? In this case, it would be the "50","100","150","200","250" label on the x axis.

Cheers,

Harton

[Roy I]

Not aware of any documented way within Vega to get the generated tick positions.

However, Vega uses d3.js and it is possible to use d3.js in javascript to get an array of tick positions:

      http://stackoverflow.com/questions/22722952/how-can-i-get-the-d3-js-axis-ticks-and-positions-as-an-array

      https://github.com/d3/d3-3.x-api-reference/blob/master/SVG-Axes.md

Here is an example for linear scale. Note that d3.js may not create the exact number of ticks you request.

Javascript for d3.js v3 (Vega 2)

----------------------------------

var myScale = d3.scale.linear();      // Note: d3.scaleLinear() for d3.js v4 (Vega 3)

myScale.domain([0, 250]);

var myTicksCount = 5;

var myAxis = d3.svg.axis().scale(myScale).orient("bottom").ticks(myTicksCount);

var myTicksArray = myAxis.scale().ticks(myAxis.ticks()[0]);

myTicksCount = myTicksArray.length;

console.log(JSON.stringify(myTicksArray));      // [0,50,100,150,200,250]

console.log(myTicksCount);      // 6

On Thursday, October 20, 2016 at 4:34:57 PM UTC-4, Saad Malik wrote:

[Harton Wong]

Oh I see. Thanks Roy for your timely response :)

[Eric Socolofsky]

Vega has come a long way since this post, but you can now use labelOverlap to automatically hide axis tick labels when they overlap.