Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

d3.js

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.

like image 774
John Hoffman Avatar asked Sep 23 '14 20:09

John Hoffman


1 Answers

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);
like image 119
keepTrackOfYourStack Avatar answered Sep 27 '22 23:09

keepTrackOfYourStack