D3.js масштабирование и панорамирование - замок на оси у

Question

Я пытаюсь построить биржевую диаграмму с функцией масштабирования с помощью D3.js

Я ищу, чтобы начать с this example здесь и попытаться сделать трансфокатора чувство более естественным для биржевой диаграммы. Совершенно example is this. Таким образом, разница, насколько я понимаю, заключается в том, что масштабирование и панорамирование блокируются по оси Y, и единственным способом перемещения оси Y является автоматическое заполнение ценового диапазона текущих видимых данных.

Другая заметная разница заключается в том, что масштабирование не приближается к текущему положению мыши, как в первом примере.

Как можно отрегулировать пример для более тесного взаимодействия с другим графиком? Каков предпочтительный код, как его изменить?

Answer 1

Настройка режима масштабирования на не влияет на ось y, просто: просто не присоединяйте y-масштаб к поведению масштабирования.

В примере кода вы связаны, функциональность масштабирования добавляется в этой строке:

this.plot.call(d3.behavior.zoom() 
        .x(this.x) 
        .y(this.y) 
        .on("zoom", this.redraw()) 
        ); 

Это создает объект поведение масштабирования/функции, связывает его с графиками х и у шкал, и рассказывает для вызова функции, возвращаемой this.redraw() после каждого события масштабирования. Поведение масштабирования автоматически изменяет область масштабирования при масштабировании, а затем функция перерисовки использует модифицированный масштаб. Если вы не измените масштаб y, то масштабирование не повлияет на y-домен.

Получение шкалы y для автоматической настройки в заданной степени данных немного сложнее. Однако помните, что поведение масштабирования автоматически изменит область масштаба x, чтобы представить объем видимых данных по горизонтали. Затем вам нужно будет получить соответствующий фрагмент вашего массива данных и выяснить размер значений y из него, соответственно установить свой y-домен, а затем вызвать функцию перерисовки (помня, что this.redraw() только возвращает функцию перерисовки, чтобы вызовите его в рамках другой функции, вам нужно будет использовать this.redraw()()).

Чтобы зум не зависел от положения мыши, установите center point для изменения масштаба.