我正在尝试创建一个D3折线图，其中包含两个垂直的y轴，一个在左侧，另一个在右侧。左轴的域可能具有负值，这意味着零点将向上移动。我想将右轴的零点对齐到左轴之一。与您在此处看到的类似，但是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在技术上如何做到吗？甚至还有更优雅的解决方案？
最佳答案
在您的情况下，左刻度尺上从-4(最小值)到0的距离必须匹配右刻度尺上从-40(最小值)到0的距离必须匹配，左刻度尺从0到10(最大值)的距离必须匹配到正确刻度上从0到120(最大值)的距离。
要构建右轴，可以使用两个轴(一个从-40到0的轴，另一个从0到120的轴)。您可以通过执行以下操作获取左轴的基线:var base = leftAxis(0);用于构建第一个轴的第一个比例的范围将是[leftAxis(minVal), base]，第二个比例的范围将是[base, leftAxis(maxVal)]。
希望有帮助!祝好运!
关于javascript - D3图表:如何对齐双y轴的零点，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33550833/