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軸的零點

回答

相關問題