我有一个堆积条形图similar to this link,图表正确绘制但问题是y轴线是不可见的。但是,如果在示例图表中增加浏览器页面大小,则可以看到在某个分辨率x处,将显示y轴线和水平刻度线。因此,x,y轴线和水平刻度线在页面分辨率下出现和消失。怎么解决这个?
我正在定义x和y轴,如下所示
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);
答案 0 :(得分:9)
设置
后问题解决了shape-rendering: geometricPrecision;
代替
shape-rendering: crispEdges;
我希望将来有人帮助。
答案 1 :(得分:0)
看到它在行动中可能会有所帮助,但是你可能会在svg的末尾绘制轴。您可以尝试添加样式" overflow:visible"到svg元素,以确保有足够的空间来显示您的轴。如果这就是问题,您需要将轴定位在远离边缘的位置。