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

我试图创建一个带有两个垂直y轴的D3折线图，一个在左边，一个在右边。左轴的领域可能有负值，这意味着零点将向上移动。我想将右轴的零点对齐到左轴的一个。类似的，你可以在这里看到，但没有x轴移动得向上：到目前为止D3图表：如何对齐双y轴的零点

，我试图寻找它代表零点的滴答声的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>

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

这只是我的基本想法，它是如何完成的。有谁知道它在技术上如何与D3/Javascript？或者甚至可能有更优雅的解决方案？

来源

2015-11-05 flixe

AFAIK这不能轻易完成（请参阅https://stackoverflow.com/questions/20641547/using-d3-js-is-there-a-way-to-zero-align-two-y-axes -with阳性和阴性-v）。 –

感谢您的链接！用户jglover发布了一个适合我的解决方案！ – flixe

在您的情况下，左标尺从-4（最小值）到0的距离必须与右标尺从-40（最小值）到0以及从0到10（最大值）左标尺必须与右标尺寸从0到120（最大值）的距离相匹配。

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

希望有帮助！祝你好运！

来源

2015-11-05 20:28:39 sergeyz

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

的确，您必须将轴分成两部分。我在答案中提供的范围将在其终点匹配。您需要注意的唯一一件事就是删除一个轴上对应于零的轴刻度，以便只有一个轴显示零刻度。 – sergeyz

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

回答

相关问题