Clever Geek Handbook

How to visualize end ticks always using the d3 svg axis

I'm not sure how label placement works with the svg d3 axis. I've tried playing with ticks, tickSize parameters, but essentially I get the start and end of ticks "sometimes" with random data plotted on the chart

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

(Please ignore the angle aspect. The part that interests me is next 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 to always get the start and end ticks displayed for both the X-axis and Y-axis? I always always get the start and end tick lines on the X and y axis (I don't know how this happens - I don't see the .tick element at this point in the chrome inspector), but the labels are missing. I can find the first and last ticks and render the text with information about the label of the label, but it is clear that I cannot always do this, because sometime the axis gives me initial ticks, and sometime it does not.

Any help is appreciated.

thank

+3


source to share


1 answer


I'm not sure I fully understand your question, if you want to remove the check marks with the end axes you must set

.outerTickSize(0),

If you want to customize the end ticks you can use



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

Take a look at the JSFiddle for a demo.

+4


source






More articles:


All Articles