javascript - D3 chart Y axis line is not visible in some resolutions -


i have stacked bar chart similar link, graph plotted correctly problem y axis line invisible. if increase browser page size in example chart, can see @ resolution x, y axis lines , horizontal tick lines appear. x, y axis lines , horizontal tick lines appearing , disappearing subjected resolution of page. how solve this?

i defining x , y axis below

var yaxis = d3.svg.axis()   .scale(y)   .orient("left")   .ticks(5)  .ticksize(-width - 180, 0, 0)   .tickformat(d3.format("$"));  var xaxis = d3.svg.axis()   .scale(x)   .orient("bottom")   .tickformat(d3.time.format("%b"));  svg.append("g")   .attr("class", "y axis")   .attr("transform", "translate(0,0)")   .call(yaxis);  svg.selectall('.axis line, .axis path') .style({ 'stroke': '#ddd', 'fill': 'none', 'stroke-width': '1px' });   svg.append("g")   .attr("class", "x axis")   .attr("transform", "translate(0," + height + ")")   .call(xaxis); 

problem solved after setting

shape-rendering: geometricprecision; 

in place of

shape-rendering: crispedges; 

i hope helps in future.


Comments

Popular posts from this blog

OpenCV OpenCL: Convert Mat to Bitmap in JNI Layer for Android -

android - org.xmlpull.v1.XmlPullParserException: expected: START_TAG {http://schemas.xmlsoap.org/soap/envelope/}Envelope -

python - How to remove the Xframe Options header in django? -