How to set minimal step for y-axis in d3.js?

Question

I have a bar chart where values can range from 0 to 5. The values can only be integers (0, 1, 2, 3, 4, 5).

However, the y-axis renders with smaller steps, for example 0, 0.5, 1, 1.5, 2 etc. I want to set the axis values to integers only, but playing with domain and range hasn't helped me at all.

I don't see an option to set something like minimalInterval = 1. How do I do this? I'm sure there's an option somewhere. Current code for the axes:

var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
    y = d3.scaleLinear().rangeRound([height, 0]);

x.domain(data.map(function(d) { return d.day; }));
y.domain([0, d3.max(data, function(d) { return d.value; })]);

g.append("g")
    .attr("class", "axis axis--x")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x))
    .selectAll("text")
    .attr("y", 0)
    .attr("x", 9)
    .attr("dy", ".35em")
    .attr("transform", "rotate(90)")
    .style("text-anchor", "start");

g.append("g")
    .attr("class", "axis axis--y")
    .call(d3.axisLeft(y))
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", "0.71em")
    .attr("text-anchor", "end");

This might help: https://stackoverflow.com/a/12643747/9297144 — Xavier Guihot, Feb 19 '18 at 17:40

score 6 · Accepted Answer · answered Feb 19 '18 at 17:48

There is nothing like steps for a D3 generated axis.

However, in your case, the solution is simple: you can use tickValues with d3.range(6) and a formatter for integers or, even simpler, you can use ticks.

According to the API,

Sets the arguments that will be passed to scale.ticks and scale.tickFormat when the axis is rendered, and returns the axis generator. The meaning of the arguments depends on the axis’ scale type: most commonly, the arguments are a suggested count for the number of ticks (or a time interval for time scales), and an optional format specifier to customize how the tick values are formatted.

So, in your case:

axis.ticks(5, "f");

Where 5 is the count and f is the specifier for fixed point notation.

Here is a demo (with an horizontal axis):

var svg = d3.select("svg");
var scale = d3.scaleLinear()
  .domain([0, 5])
  .range([20, 280]);
var axis = d3.axisBottom(scale)
  .ticks(5, "f")
var gX = svg.append("g")
  .attr("transform", "translate(0,50)")
  .call(axis)

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

Just for completeness, the same code without ticks:

var svg = d3.select("svg");
var scale = d3.scaleLinear()
  .domain([0, 5])
  .range([20, 280]);
var axis = d3.axisBottom(scale);
var gX = svg.append("g")
  .attr("transform", "translate(0,50)")
  .call(axis)

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

Thanks. But can you please explain the purpose of `range([20, 280])` in your example? And if ticks can be added to my code without changing the way it currently looks (with `scaleLinear` etc). — sveti petar, Feb 19 '18 at 18:00
That's just a demo I'm using with a default SVG, which is 300px wide. That's why I'm using `[20,280]`. — Gerardo Furtado, Feb 19 '18 at 18:03

How to set minimal step for y-axis in d3.js?

1 Answers1