d3 tick marks on integers only

Question

I have a d3 bar chart whose values range from 0-3. I would like the y-axis to only show integer values, which I can do by

var yAxis = d3.svg.axis().scale(y).orient("right").tickFormat(d3.format("d"));

However, there are still tick marks at the non-integer markings. Setting the tick format only hides those labels. I can explicitly set the number of ticks or the tick values, but what I'd like to do is to just be able to specify that tick marks only appear at integer values. Is that possible?

enter image description here

Possible duplicate of [How to limit d3.svg.axis to integer labels?](https://stackoverflow.com/questions/12643591/how-to-limit-d3-svg-axis-to-integer-labels) — IBBoard, Jun 30 '19 at 13:38

score 40 · Answer 1 · answered Jun 29 '19 at 22:22

40

The proper solution is to retrieve ticks using .ticks() method, filter them to keep only integers and pass them to .tickValues():

const yAxisTicks = yScale.ticks()
    .filter(tick => Number.isInteger(tick));
const yAxis = d3.axisLeft(yScale)
    .tickValues(yAxisTicks)
    .tickFormat(d3.format('d'));

For completeness here is explanation why other solutions are bad:

@BoomShakalaka solution uses .tickSubdivide() method, which no longer exists.

@cssndrx and @kris solutions force you to specify number of ticks, so it will not work in generic case.

answered Jun 29 '19 at 22:22

diralik

6,391
3
28
52

1

Lifesaver. I think I've been swimming around old version solutions. This one is applicable for me. – Ben Kao Oct 14 '19 at 08:11
6

`.filter(tick => Number.isInteger(tick));` can be simplified as `.filter(Number.isInteger)` – emepyc Dec 05 '19 at 13:48

Boom Shakalaka · Accepted Answer · 2012-11-28T02:30:59.110

16

You could add .ticks(4) and .tickSubdivide(0) as I've done below:

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("right")
    .ticks(4)
.tickFormat(d3.format("d"))
    .tickSubdivide(0);

edited Nov 28 '12 at 02:30

answered Nov 27 '12 at 05:19

Boom Shakalaka

895
2
10
18

Unfortunately that didn't seem to work. I have added a picture of what it looks like (I don't have tickPadding 8 on, but that shouldn't matter). Ignore the fact that the top and bottom labels are cutoff, I'm still working on that part. – Jeff Storey Nov 27 '12 at 12:51
2

`.tickSubdivide(0)` should do the trick. Do you have non-integer values in your data? You may want to try making the d3.format("d") or d3.format("f") along with the .tickSubdivide. Also make sure to clear the browser cache. You are correct that .tickPadding is irrelevant here. – Boom Shakalaka Nov 27 '12 at 17:14
All data is integer data, and I've tried exactly as you have it here, and it still looks like the image above... – Jeff Storey Nov 27 '12 at 19:59
Also it looks like the number of tick marks is set to 10 by default, but only showing on integers in this graph would only show 4. Could that have something to do with it? – Jeff Storey Nov 27 '12 at 20:58
1

Interesting. I haven't had this issue with 5-10 ticks, but it is harder to remove them when you have less than 5. Try adding .ticks(4) I edited my answer. – Boom Shakalaka Nov 28 '12 at 02:28
2

That did the trick. I changed to be Math.min(maxHeight+1,yAxis.ticks()) so if the graph height is less than the number of ticks, it reduces the number of ticks. – Jeff Storey Nov 28 '12 at 02:47

cssndrx · Answer 3 · 2013-08-05T16:44:43.757

5

You can programatically set the number of ticks to data.length - 1 (this solves the issue you were having for small numbers of ticks as well)

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("right")
    .tickFormat(d3.format("d"))
    .ticks(data.length - 1)

edited Aug 05 '13 at 16:44

answered Aug 05 '13 at 16:26

cssndrx

773
2
9
17

2

data.length - 1 is related to the x-axis, why should it be used when setting ticks on the y-axis? Better would be sth. like max-value to define the ticks on the y-axis – peter Nov 04 '13 at 18:33

PBrockmann · Answer 4 · 2018-03-05T08:25:58.117

From all listed solutions, I haven't been able to get rid off tick marks.

.xAxis().ticks(4)
.tickFormat(d3.format("d"));

remove labels but not the ticks.

So I propose to apply a threshold on ticks(). If less than 4 then it is set to the limit itself (0,1,2,3). Is done with:

.on("preRedraw", function(chart) {
    var maxTick = chart.group().top(1)[0].value;
    if (maxTick < 4) {
      chart.xAxis().ticks(maxTick);
    } else {
      chart.xAxis().ticks(4);
    }

});

A jsfiddle is available from https://jsfiddle.net/PBrockmann/k7qnw3oj/

Let me know if there is a simpler solution. Regards

kristjan reinhold · Answer 5 · 2015-05-22T08:07:50.190

Used this TIP to make this work on dynamic charts (1 or more charts on page)

That did the trick. I changed to be Math.min(maxHeight+1,yAxis.ticks()) so if the graph height is less than the number of ticks, it reduces the number of ticks. – Jeff Storey Nov 28 '12 at 2:47

  // It is either 10 or Maximum Chart height + 1 

        var graphValues = selection.data()[0].map(function(obj) {
            return obj['count'];
        }).compact();  

        Array.prototype.maxValArray = function() {
          return Math.max.apply(null, this);
        };

        var maxValue = graphValues.maxValArray();

        yAxis.ticks(Math.min(maxValue + 1, 10))

d3 tick marks on integers only

5 Answers5

Linked