NVD3.js 在 x 轴下方绘制区域 (stackedArea) 系列的 MultiChart 遮盖了标签

Question

您好，我正在使用来自 GitHub master 分支的当前 nvd3.js 多图表。某些值的组合导致我的图表在 x 轴下方绘制区域系列，从而导致该系列在放大图表时遮盖 x 轴标签。

放大后是这样的。

这个例子在这里https://github.com/mlawry/nvd3/blob/master/examples/multiChart4.html 只需将文件 "multiChart4.html" 放在 nvd3 Git 存储库的 "examples" 文件夹中，然后在任何 Web 浏览器中打开它。

有趣的是，这并不总是发生，只有在某些值下才会发生。谁能指出正确的方向来解决这个问题？

Answer 1

原来问题很简单，区域系列（黄色）的最小值不为零（阅读图表是 7860）。由于 stackedArea.js 使用 forceY 到 add 0 to the y values:

// If the user has not specified forceY, make sure 0 is included in the domain
// Otherwise, use user-specified values for forceY
if (scatter.forceY().length == 0) {
    scatter.forceY().push(0);
}

就是说在multiChart.js中设置yScale2的时候也要加0（yScale2是画在对 y-axis)。目前这还没有完成，所以事情不匹配，黄色系列绘制在 x-axis 下方，因为它试图从 0 开始绘制，低于 7860。

我的解决方法是使用extraValue2BarStacked在yScale2、see the new multiChart.js.中包含0，当然，yScale1也应该这样做。

if (dataBars1.length || dataStack1.length) {
    // Existence of bar or stackedArea automatically requires y-axis to show 0 value.
    extraValue1BarStacked.push({x:0, y:0});
}

...

if (dataBars2.length || dataStack2.length) {
    // Existence of bar or stackedArea automatically requires y-axis to show 0 value.
    extraValue2BarStacked.push({x:0, y:0});
}

NVD3.js 在 x 轴下方绘制区域 (stackedArea) 系列的 MultiChart 遮盖了标签

NVD3.js MultiChart with area (stackedArea) series drawn below the x-axis obscures labels

javascript

nvd3.js