D3图表：如何对齐双y轴的零点

Question

我正在尝试创建一个带有两个垂直y轴的D3折线图，一个在左边，一个在右边。左轴的域可以具有负值，这意味着零点将向上移位。我想将右轴的零点对齐到左轴的零点。类似于你在这里看到的，但没有x轴向上移动：

到目前为止，我试图搜索代表零点滴答的html g元素：

wget --post-data 'user=foo&password=bar' http://server.com/auth.php

我需要的是在transform属性中提取“185”高度值，以便我可以将它用于第二轴的范围。

这只是我的基本想法，它是如何完成的。有没有人知道D3 / Javascript技术上怎么做？或者甚至可能有一个更优雅的解决方案？

Answer 1

无需拆分轴 - 只需确保两个轴的最小值/最大值'成比例即可。您只需要确定必须延伸的轴即可。

在您的示例中，只需使用因子 10 即可使两个轴完美对齐。您的左轴扩展到 12，而不是最初的 10。

Answer 2

在您的情况下，左侧刻度距离-4（最小值）到0的距离必须与右侧刻度上从-40（最小值）到0的距离和左侧0到10（最大值）的距离相匹配比例必须与右侧刻度上0到120（最大值）的距离相匹配。

要构建右轴，您可以使用两个轴（一个从-40到0，另一个从0到120）。您可以通过执行以下操作获取左轴的基线：var base = leftAxis(0);您用于构建第一个轴的第一个比例范围为[leftAxis(minVal), base]，第二个比例的范围为[base, leftAxis(maxVal)]。

希望有所帮助！祝你好运！