How to tell d3 not to repeat values in ticks?
I made a bar / histogram. I read in my frequency data as integers and set up my y-axis like this:
var yScale = d3.scale.linear().range([300, 0]).domain([0, 2]);
var yAxis = d3.svg.axis().scale(yScale).orient(‘left’)
.tickFormat(d3.format(,.0f));
Unfortunately, the y-axis repeats each frequency multiple times, as shown here:
How do I tell d3 to stop repeating y-values along the y-axis? I don't want to use .ticks(someNumber)
as I want the tick count to be flexible.
source to share
Use .ticks (n) instead of tickFormat () on your axis. The ticks () function determines how many d3 ticks should be targeted - it is not always exactly that number. He himself chooses the most reasonable subsection. n is 10 by default, but you can change it depending on the domain, so for the example data, you can set it to 3 (0,1,2). In theory, you can also use it when entering data.
Is your graph / dynamic range versus data? Most of the time, you don't want this to be unpredictable. And if you have set the chart height explicitly, you want to limit the number of ticks and labels to the number that is most suitable for that size.
You can also look at https://github.com/mbostock/d3/wiki/Quantitative-Scales#linear_nice . This allows you to define rules for your ticks.
source to share
I need mine to be dynamic, this worked for me: [Version 4]
var y = d3.scaleLinear().range([height, 0]);
var yAxis = d3.axisLeft()
.scale(y)
.tickFormat(d3.format("%d"));
// Reset the axes domains with new data
y.domain([0, d3.max(data, function (d) { return d.value; })]);
if (y.domain() [1] < 10) {
yAxis.ticks(y.domain()[1])
// 2 ticks
//yAxis.tickValues(y.domain());
}
// Add the y-axis with a transition
yAxisG
.transition()
.duration(500)
.call(yAxis);
source to share