我有一个堆积条形图 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);
最佳答案
设置后问题解决
shape-rendering: geometricPrecision;
代替
shape-rendering: crispEdges;
我希望它对以后的人有所帮助。
关于javascript - D3 图表 Y 轴线在某些分辨率下不可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31177963/