CODEWITHSUNDEEP
svgd3.js
user2789284
user2789284

Reputation: 771

How to render end ticks always using d3 svg axis

I am not sure how the tick placement works with d3 svg axis. I tried playing with the ticks, tickSize options but essentially I get the start and end ticks "sometimes" with random data plotted

http://plnkr.co/edit/i5DBgfWzr2sa8Yugg2A8?p=preview

(Please ignore the angularjs aspect. The part that I am interested in is the following in d3)

   var make_x_axis = function () {
            return d3.svg.axis()
                  .scale(x)
                  .orient("bottom") 
                  .ticks(5)
                  .tickFormat("")
                  .tickPadding(8); 
        };

        var make_y_axis = function () {
            return d3.svg.axis()
                  .scale(y)
                  .ticks(6)
                  .orient("left")
                  .tickSize(10,10)
                  .tickPadding(8);
        };

How do I always get the start and end ticks rendered for both X and Y axis? I clearly always get the start and end tick lines on both X and y axis (Unsure how that is happening - I do not see a .tick element at that location in the chrome inspector) but the labels are missing. I can find the first and last tick and render a text with the tick label info but clearly I cannot always do it because sometime the axis gives me the start ticks and sometime it does not.

Any help is appreciated.

Thank you

Upvotes: 4

Views: 6198

Answers (1)

huan feng
huan feng

Reputation: 8623

I am not sure I fully understand your question, if you want to remove the ending x-axis ticks, you should set

d3js V3

.outerTickSize(0),

d3js V4 - V6

tickSizeOuter(0)

If you want to customize the ending ticks, you may use

.tickValues(y.ticks(5).concat( y.domain() ));

Have a look at my JSFiddle for a demonstration.

Upvotes: 5

Related Questions