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
Post a Comment