具有不同Y刻度的多个折线图与可共享的X轴使用d3js

Question

我在这个项目上工作，我有大量的数据。它按类别Soybean, MA20, MA50, MA100, BBW_2和date进行细分。 到目前为止我所做的是使用一个代码来过滤和放大数据。结果是

• 选择大豆：

• 选择MA50：

• 选择BBW_2！这就是问题所在！ ： 问题是选择BBW_2时。您可以看到触摸X轴的橙色线条。这是BBW_2。它的Y'轴最大值为2，无限小于1200，因此刻度不能按预期工作。其他类别不会发生这种情况，因为它们具有相似的Y'轴值。

我想达到什么目标？

我想绘制用户选择将所选类别生成的线图附加到相同X轴但具有不同Y比例的所有类别。它的外观就是这样一个例子：。

我尝试了什么：

• 当用户选择BBW_2时更改Y比例。

• 绘制不同的SVG。这不起作用，因为它会失去缩放效果。

代码： https://jsfiddle.net/ldepaula/3q1k9hyj/1/