Come bloccare i percorsi di sfocatura/scomparsa in D3 quando si utilizza una viewbox?

Sto usando la libreria D3 per creare alcuni grafici. Sono posizionati all'interno di una viewbox (vedere lo snippet sotto "output").Come bloccare i percorsi di sfocatura/scomparsa in D3 quando si utilizza una viewbox?

La casella di visualizzazione consente di ridimensionare in modo reattivo.

Tuttavia a determinate risoluzioni, la linea scompare o sfoca/si addensa. Penso che questo sia collegato ad esso non essendo pixel perfetto a quelle risoluzioni, ma potrei sbagliarmi.

Nessun styling aggiuntivi è stato aggiunto ad eccezione

shape-rendering: crispEdges;

Il JS

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

L'uscita

<svg class="bargraph" viewBox="0 0 250 250" preserveAspectRatio="xMidYMid" width="100%" height="100%"> 
    <g class="x axis">...</g> 
    <g class="y axis"> 
     <g class="tick minor" transform="translate(0,150)"> 
     ..repeat.. 
    </g> 
    ...content... 
</svg>

L'uscita Painted

Bad - linee di nota il 75% e il 50%