title: How to force uniform rings in D3 ridal plot
body: <p>I have successfully drawn a radial graph but the gap between the rings gets smaller and smaller the further out they go. I would like them to be uniform in distance apart.</p>
  
  <p>I have tried altering the yticks / x ticks and also various scales I see that use PI... Doing the former, I've managed to get a uniform scale on my graphs... i.e steps of 2, rather than the code deciding for itself, but the rings still get closer together.</p>
  
  <p>Without wanting to annoy by posting the entire code, it's a bit tricky to choose the right section, as I'm not sure which part of the code I should be looking at. </p>
  
  <pre><code>var svg = d3.select("svg"),
  width = +svg.attr("width"),
  height = +svg.attr("height"),
  innerRadius = 180,
  outerRadius = Math.min(width, height) / 2,
  g = svg.append("g").attr("transform", "translate("+width / 2 + "," + height / 2 + ")");
  
  var x = d3.scaleBand()
  .range([0, 2 * Math.PI])
  .align(0);
  
  var y = d3.scaleRadial()
  .range([innerRadius, outerRadius]);
  
  var z = d3.scaleOrdinal()
  .range(&lt;?php echo json_encode($plotColors);?&gt;);
  </code></pre>
  
  <p>I expect the rings to be equal distance from each other, however, they get closer as they move out from the center.</p>
  
  <p><a href="https://i.stack.imgur.com/eNog1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eNog1.png" alt="enter image description here"></a></p>