ビューボックスの使用時にD3でパスがぼやけたり消えたりするのを防ぐにはどうすればいいですか？

私はグラフを作成するためにD3ライブラリを使用しています。それらはビューボックス内に配置されます（下の抜粋を参照してください）。ビューボックスの使用時にD3でパスがぼやけたり消えたりするのを防ぐにはどうすればいいですか？

ビューボックスは反応的なスケーリングを可能にするものです。

ただし、特定の解像度では、線が消えるか、またはぼかし/濃くなります。私はこれが、それらの決議で完全なピクセルではないことにリンクしていると思うが、私は間違っているかもしれない。

追加のスタイリングは

shape-rendering: crispEdges;

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

出力

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

塗装出力を追加されていません

悪い

- グッドノートラインは75％と50％