title: Display only whole values along y axis in d3.js when range is 0-1 or 0-2
body: <p>I am using d3js to display a realtime representation of the views of a website. For this I use a stack layout and I update my dataset by JSON at the moment.</p>
  
  <p>When there is only 1 or 2 views being displayed on the y axis, which is dynamic related to the amount of views in the graph, the axis labels are: 1 => <code>0, 0.2, 0.4, 0.6, 0.8, 1</code>, the axis labels are: 2 => <code>0, 0.5, 1, 1.5, 2</code> This makes no sense for my dataset since it displays views of a page, and you can't have half a view. </p>
  
  <p>I have a linear scale in d3js I base my y axis on</p>
  
  <pre><code>var y_inverted = d3.scale.linear().domain([0, 1]).rangeRound([0, height]); 
  </code></pre>
  
  <p>According to <a href="https://github.com/mbostock/d3/wiki/Quantitative-Scales#wiki-linear_rangeRound" rel="noreferrer">the documentation of rangeRound()</a> I should only get whole values out of this scale. For drawing my axis I use:</p>
  
  <pre><code>var y_axis = svg.append("g")
      .attr("class", "y axis")
      .attr("transform", "translate(0,0)")
      .call(y_inverted.axis = d3.svg.axis()
          .scale(y_inverted)
          .orient("left")
          .ticks(5));
  </code></pre>
  
  <p>Because it is a realtime application I update this every second by calling:</p>
  
  <pre><code>function update(){
      y_inverted.domain([yStackMax, 0]);
      y_axis.transition()
          .duration(interval)
          .ease("linear")
          .call(y_inverted.axis);
  }
  </code></pre>
  
  <p>yStackMax is calculated from a stacklayout, as far as I know the data used for the y values only contain integers.</p>
  
  <pre><code>var yStackMax = d3.max(layers, function(layer) {
      return d3.max(layer, function(d) {
          return d.y0 + d.y;
      });
  });
  </code></pre>
  
  <p>I have tried several things to get a proper value for my y axis.</p>
  
  <pre><code>d3.svg.axis()
      .scale(y_inverted)
      .orient("left")
      .ticks(5).tickFormat(d3.format(",.0f"))
  </code></pre>
  
  <p>Got me the closest sofar, but it still displays <code>0, 0, 0, 1, 1, 1</code></p>
  
  <p>Basically what I want is to only have 1 tick when <code>yStackMax</code> is 1, 2 ticks when it's 2, but it should also work if <code>yStackMax</code> is 12 or 1,000,000</p>