How to stop the path from blurring / fading in D3 when using the viewport?

Question

I use the D3 library to create some graphs. They are placed in the viewport (see the snippet below "output").

The viewport must be flexible scaling.

However, at certain resolutions, the line either disappears or erodes / thickens. I think this is due to the fact that it is not ideal for these resolutions, but I could be wrong.

Extra style not added except

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

Output

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

Painted exit

Bad note lines 75% and 50%

Good - as crispy as a cucumber!

Answer 1

Use vector-effect = "non-scaling-stroke", so the stroke width does not scale. That way, it won't crash when you zoom out.