Диаграмма D3: Как выровнять нулевые точки двух осей y

Question

Я пытаюсь создать линейную диаграмму D3 с двумя вертикальными осями y, один слева и один с правой стороны. Область левой оси может иметь отрицательные значения, что означает, что нулевая точка будет сдвинута вверх. Я хочу выровнять нулевую точку правой оси с одной из левой оси. Подобно, как вы можете видеть здесь, но без оси х движущихся вверх тоже:

До сих пор я пытался искать HTML г элемент, который представляет клеща нулевой точки:

<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? Или, может быть, даже имеет более элегантное решение?

Answer 1

В вашем случае расстояние от -4 (минимальное значение) до 0 в левой шкале должно соответствовать расстоянию от -40 (минимальное значение) до 0 в правой шкале и расстоянию от 0 до 10 (максимальное значение) на левая шкала должна совпадать с расстоянием от 0 до 120 (максимальное значение) в правой шкале.

Чтобы построить правую ось, вы можете использовать две оси (от -40 до 0, а другую - от 0 до 120). Вы можете получить базовую линию левой оси, выполнив: var base = leftAxis(0); Диапазон первой шкалы, которую вы будете использовать для построения первой оси, будет [leftAxis(minVal), base], диапазон второй шкалы будет [base, leftAxis(maxVal)].

Надеюсь, что это поможет! Удачи!