palantir / plottable

:bar_chart: A library of modular chart components built on D3
http://plottablejs.org/
MIT License
2.97k stars 221 forks source link

Axis with blank ticks shows incorrectly #3082

Open zmandel opened 8 years ago

zmandel commented 8 years ago

I have a chart where the X axis value is always a whole number. Thus, I dont want to show numbers that are not whole in the Axis. Sometimes Plottable choses a "0.5" step, and I want to prevent those fractions.

My aproach was to add a formatter to the axis, and return a blank string when the number isnt whole. However, it doesnt work, some whole numbers get skipped.

var xAxis = new Plottable.Axes.Numeric(xScale, "bottom").formatter(function (num) {
        var strCount = String(num);
        var bWhole = (num % 1 === 0);
        if (bWhole)
            return strCount;
        return ""; //using spaces wont work either
    });

I debugged this and found that in plottable.js 2.0.0 at line 4857, it calls: while (!this._hasOverlapWithInterval(interval, visibleTickLabelRects) && interval < visibleTickLabelRects.length)

and I can see that the "rects" for all my "hidden" ticks are always with left=right=start of axis. This causes Numeric.prototype._hasOverlapWithInterval to get confused, thinking that some ticks overlap, and ends up hiding a bunch of correct tickmarks,

Please let me know if my approach is incorrect to hide fractional ticks. I like plottable to chose the right "step", I dont want to add that custom logic, just I want to be able to later either customize that "step" so its always rounded-up, or to hide the fractional tickmarks.

The Chrome extension "Plus for Trello" uses this.

jtlan commented 8 years ago

The correct way to do this is to use a TickGenerator, which specifies the array of values that are even considered for display:

xScale.tickGenerator(Plottable.Scales.TickGenerators.integerTickGenerator());
var xAxis = new Plottable.Axes.Numeric(xScale, "bottom");

Hope that helps.

zmandel commented 8 years ago

awesome! Im using that now. still seems odd that the rects of those elements are off, couldnt that affect other parts of the code?