CODEWITHSUNDEEP
d3.js
Sam Selikoff
Sam Selikoff

Reputation: 12694

What does it take for .ticks() to work?

.ticks() doesn't seem to be working on my bar chart. Can somebody take a look?

Here's the fiddle. I set ticks on the x-axis near the beginning of the object:

xAxis = d3.svg.axis().scale(xScale).orient("bottom").ticks(3),

Upvotes: 15

Views: 19512

Answers (4)

duhaime
duhaime

Reputation: 27594

You can use a filter to decide which ticks to display:

var xAxis = d3.svg.axis()
    .scale(x)
    .tickValues(x.domain().filter(function(d, idx) { return idx%2==0 }))
    .orient("bottom");

The snipped above comes from this example.

Upvotes: 5

Union find
Union find

Reputation: 8150

A css-way to do this is to hide the nth axis elements you do not want. The d3 ticks, to me, is just perpetually annoying.

.tick:nth-of-type(6) > text {
    display: none;
  }
  .tick:nth-of-type(7) > text {
    display: none;
  }
  .tick:nth-of-type(8) > text {
    display: none;
  }

Upvotes: 1

Ally
Ally

Reputation: 273

I don't have enough reputation to add a comment to that first post but I think there is a misunderstanding.

The labels on the axis must be a multiple of 2, 5, or 10. The ticks function can take any number but it will modify that number to make sure the axis is a multiple of 2, 5, or 10.

For example, if the domain is 0-100 and you want 4 ticks (0, 33.33, 66.66, 100) it will round up to 6 to give you "pretty" numbers (0, 20, 40, 60, 80, 100). However, if you set ticks to 3 it will honor that and you'll have 0, 50, and 100.

Here's a post with Mike's explanation of this behavior.

It is still unclear to me why it won't count 0, 25, 50, 75, 100 if you set the ticks to 5 but I thought I'd try to clear up at least some of the confusion.

Upvotes: 17

Adithya
Adithya

Reputation: 339

ticks can take only multiple of 2,5,10 not any number . That is why you might be having problem . Please take a look at this answer for custom ticks.link

Upvotes: 10

Related Questions