如何在d3.js中设置y轴的最小步长？

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");

Answer 1

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>