Javascript 如何在X轴下方的堆叠条形图上隐藏内容

我在jsp页面的框框中使用D3JS绘制了一个水平堆叠条形图。但是堆叠条形图是巨大的，即SVG内容太大，以至于堆叠条形图的所有条形图都无法放入框中，我必须在框元素中设置自动溢出，以便在滚动时可以看到隐藏的条形图

所以我这里有个问题。 如果堆叠条形图中的条数太大，以至于无法一次性将所有条放入框中，则X轴不可见，我必须向下滚动以查看X轴上的值

我想做的是让我的X轴始终位于框底部上方，并将堆叠条形图上的内容隐藏在X轴下方

我可以管理X轴的位置，使其始终可见（即使在滚动上）。我需要帮助隐藏X轴下方堆叠条形图的内容。 这就是我改变X轴位置的方式，尽管这在执行滚动时没有帮助

svg.append（'g'））
.attr（'类'，'轴'）
.attr（'transform'，'translate（0'，+（高度-15）+'））
.呼叫（xAxis）

我不能给出实际的代码，但我已经尝试在JSFIDLE上创建我的需求

这就是我所拥有的：

您可以看到，X轴位于所有条之后

这就是我想要的：

X_轴位于和条之间，我想隐藏X轴（甚至Y轴线）下方的所有内容

非常感谢您的帮助。
好吧，我已经找到了上述问题的解决方案。
我们需要遵循三步流程。
1.动态创建一个div标记，并为其指定高度和宽度，并保持其最大值，以便矩形div标记显示在“box”div的底部。
新创建的div标记位于box div标记内

我们需要在步骤1中创建的div标记中创建另一个SVG元素。我们需要将X轴附加到新创建的SVG元素中
写现在我只是指定的方法，以便任何人都可以使用它，如果需要的话。
我将在以后的某个时候在JSFIDLE中提供适当的解决方案

谢谢