title: How to stop paths from blurring/disappearing in D3 when using a viewbox?
body: <p>I am using the D3 library to create some graphs. They are placed within a viewbox (see snippet below under "output"). </p>
  
  <p>The viewbox is to allow for responsive scaling. </p>
  
  <p>However at certain resolutions, the line either disappears, or blurs/thickens. I think this is linked to it not being pixel perfect at those resolutions, but I may be wrong. </p>
  
  <p>No additional styling has been added except</p>
  
  <pre><code>shape-rendering: crispEdges;
  </code></pre>
  
  <p><strong>The JS</strong></p>
  
  <pre><code>this.y = d3.scale.linear()
      .rangeRound([this.height, 0]);
  
  this.yAxis = d3.svg.axis()
      .scale(this.y)
      .tickSize(this.width)
      .tickValues([0, 25, 50, 75, 100])
      .tickFormat(function(d) {
          return parseInt(d, 10) + "%";
      })
      .orient("right");
  
      this.y.domain([0, 100]);
  
  
  // Y Axis elements
  var gy = this.svg.append("g").attr("class", "y axis").call(this.yAxis);
  
  // Add minor class to all the things
  gy.selectAll("g").classed("minor", true);
  
  // Move the text over to the left
  gy.selectAll("text").attr("x", 0).attr("dy", -4);
  </code></pre>
  
  <p><strong>The Output</strong></p>
  
  <pre><code>&lt;svg class="bargraph" viewBox="0 0 250 250" preserveAspectRatio="xMidYMid" width="100%" height="100%"&gt;
      &lt;g class="x axis"&gt;...&lt;/g&gt;
      &lt;g class="y axis"&gt;
          &lt;g class="tick minor" transform="translate(0,150)"&gt;
          ..repeat..
      &lt;/g&gt;
      ...content...
  &lt;/svg&gt;
  </code></pre>
  
  <p><strong>The Painted Output</strong></p>
  
  <p>Bad - note lines 75% and 50%</p>
  
  <p><a href="https://i.stack.imgur.com/H6rfE.png" rel="noreferrer"><img src="https://i.stack.imgur.com/H6rfE.png" alt="Bad"></a></p>
  
  <p>Good - as crisp as a cucumber ! </p>
  
  <p><a href="https://i.stack.imgur.com/YlIw0.png" rel="noreferrer"><img src="https://i.stack.imgur.com/YlIw0.png" alt="enter image description here"></a></p>