D3图表的Y轴线在某些分辨率下不可见

Question

I have a stacked bar chart similar to this link , graph is plotted correctly but the problem is y axis line is invisible. But if you increase the browser page size in the example chart, you can see like at some resolution x, y axis lines and horizontal tick lines will appear. So x, y axis lines and horizontal tick lines are appearing and disappearing subjected to resolution of the page. How to solve this?

I am defining x and y axis like 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);

Answer 1

Problem was solved after setting

shape-rendering: geometricPrecision;

in the place of

shape-rendering: crispEdges;

I hope it helps somebody in future.

Answer 2

It might be helpful to see it in action but its possible that you are drawing the axis at the end of the svg. You could try adding the style "overflow: visible" to the svg element to make sure that there is enough space to show your axis. If thats the problem you need to position your axis away from the edges.