Изменить масштаб оси при увеличении

Question

Я создаю график, похожий на этот: https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172

Однако, когда я приближаюсь к определенному участку, я хотел бы масштабировать ось Y до локального (отображаемого) максимума вместо глобального. Например, когда я увеличиваю данные между 2009 и 2010 годами, в верхней части появляется много пустого белого пространства.

По сути, я бы хотел получить диапазон, до которого я увеличил масштаб, и получить максимальное значение в нем.

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

Answer 1

Вам просто нужно изменить домен масштаба y для этого.

Сначала давайте создадим глобальную переменную с именем globalData и свяжем с ней массив данных. Примечание: это не правильный способ сделать это, но я сделаю это просто потому, что функции brushed и zoomed лежат вне d3.csv, что является асинхронным и рефакторинг требует некоторой работы ... так что это будет ваша работа по рефакторингу.

Затем в функциях brushed и zoomed мы фильтруем данные в соответствии с кистью:

var filteredData = globalData.filter(function(d){
    return d.date > x.domain()[0] && d.date < x.domain()[1]
});

После этого мы вычисляем новый домен y:

y.domain([0, d3.max(filteredData, function(d){
    return d.price
})]);

Не забудьте снова вызвать ось.

Это обновленные bl.ocks: https://bl.ocks.org/GerardoFurtado/17fd6b82324e355c768992e78140fe9a/33b9a6c58265454864a9d921df032e708fad5237