CODEWITHSUNDEEP
d3.js
John Hoffman
John Hoffman

Reputation: 18607

How do I tell d3 to not repeat values in ticks?

I made a histogram / bar graph. 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 several times as shown here:

enter image description here

How do I tell d3 to stop repeating y-values on the y-axis? I don’t want to use .ticks(someNumber) since I want to keep the number of ticks itself flexible.

Upvotes: 7

Views: 4602

Answers (2)

keepTrackOfYourStack
keepTrackOfYourStack

Reputation: 1255

I needed 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);

Upvotes: 3

Hugo G
Hugo G

Reputation: 16494

Use .ticks(n) instead of tickFormat() on your axis. The ticks() function defines how many ticks d3 should target - it's not always exactly that number. It chooses the most sane division unit on its own. n is 10 by default but you could change it depending on the domain, so for the example data you could set it to 3 (0,1,2). You could theoretically also use it on data enter.

Is your graph's range/height dynamic depending on data? In most cases you don't want that as it's unpredictable. And if you set your graph's height explicitly anyway you DO want to limit the number of ticks and labels to a number best suiting that size.

You might also want to look into https://github.com/mbostock/d3/wiki/Quantitative-Scales#linear_nice . That allows you to define rules for your ticks.

Upvotes: 2

Related Questions