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

Question

我正在尝试创建一个带有两个垂直y轴的D3线图，一个在左侧，一个在右侧。左轴的区间可能有负值，这意味着零点将向上移动。我想将右轴的零点与左轴的零点对齐。类似于您在此处看到的情况，但不会使x轴也向上移动：

到目前为止，我尝试搜索代表零点刻度的HTML g元素：

<g id="tmp" class="y axis" transform="translate(30,0)" fill="red">
    <g class="tick" style="opacity: 1;" transform="translate(0,330)">
    <g class="tick" style="opacity: 1;" transform="translate(0,257.5)">
    <g class="tick" style="opacity: 1;" transform="translate(0,185)">
        <line x2="-5" y2="0">
        <text dy=".32em" style="text-anchor: end;" x="-8" y="0">0</text>
    </g>

我需要在transform属性中提取“185”高度值，以便我可以将其用于第二个轴的范围。这只是我的基本想法。有人知道如何在D3 / Javascript中进行技术处理吗？或者甚至有更优雅的解决方案吗？

- flixe

---

据我所知，这并不容易实现（请参见https://dev59.com/pHrZa4cB1Zd3GeqP1l0j）。 - Lars Kotthoff

谢谢你的链接！用户jglover发布了一个对我有用的解决方案！ - flixe

这个问题是否得到了解答？在使用d3.js时，是否有一种方法可以将具有正负值的两个Y轴对齐到零点？ - Federico Baù

Answer 1

不需要拆分轴 - 只需确保两个轴的最小/最大值成比例。您只需要确定必须扩展的轴。

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

- Ralph Fiergolla

---

欢迎来到StackOverflow。虽然这个解释可能解决了问题，但是包括一个样例代码来说明为什么这个解决方案有效会真正有助于提高你的帖子质量，并且可能会得到更多的赞同。请记住，你正在回答未来读者的问题，而不仅仅是现在提问的人。我建议你编辑你的答案并添加一些代码示例，谢谢！ - Federico Baù

Answer 2

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

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

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

- sergeyz

---

谢谢，但是创建两个轴而不是一个会带来另一个问题：如何绘制与它们对应的线条？我能想到的唯一方法是将我正在使用的数据数组分成正值和负值，并创建两条线而不仅仅是一条，但即使这样，在确保两条线在其端点处匹配方面也可能很复杂... - flixe

确切地说，您需要将轴分成两部分。我在答案中提供的范围将在它们的端点处匹配。您唯一需要注意的是，在其中一个轴上删除与零对应的轴标记，以便只有一个轴显示零刻度。 - sergeyz