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

【问题标题】：D3 chart Y axis line is not visible in some resolutionsD3 图表 Y 轴线在某些分辨率下不可见
【发布时间】：2015-07-02 07:19:36
【问题描述】：

我有一个堆积条形图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);

【问题讨论】：

标签： javascript d3.js charts

【解决方案1】：

设置后问题解决

shape-rendering: geometricPrecision;

代替

shape-rendering: crispEdges;

我希望它对将来的人有所帮助。

【讨论】：

【解决方案2】：

查看它的实际效果可能会有所帮助，但您可能在 svg 的末尾绘制轴。您可以尝试将样式“溢出：可见”添加到 svg 元素，以确保有足够的空间来显示您的轴。如果这就是问题所在，您需要将轴定位在远离边缘的位置。

【讨论】：