Как применить горизонтальный разрыв к гистограмме d3.js

Я использую Rickshaw (основанный на d3.js) для построения уложенных гистограмм. Проблема в том, что первый бар обычно намного выше, чем другие, что приводит к нарушению визуальной обратной связи.

Использование логарифмической шкалы (я думаю) не вариант здесь, потому что тогда пропорции между стеками в баре будут сломаны. Я хотел представить горизонтальный разрыв, как на следующем изображении:

Однако я не могу найти какую-либо особенность Rickshaw или d3.js, чтобы сделать что-то вроде этого. Любые предложения о том, как их сделать?

Ответ 1

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

Создайте две шкалы: одну для нижней и одну для верхней. Установите соответствующие домены и диапазоны.
Передать значения в более низкую шкалу, укорачивая их при максимальном значении домена, так что более длинные полосы достигают максимума.
Передать значения в верхнюю шкалу, фильтруя те, которые ниже минимального.

Вам в основном нужно создать два графика, которые выровнены друг с другом, чтобы создать впечатление, что есть только один. Если вы это помните, делать это не должно быть слишком сложно.

Здесь приведено быстрое и грязное доказательство концепции, в котором используется линейная шкала .clamp(true), чтобы предотвратить слишком большие значения баров для значений вне домен.

Ответ 2

компонент d3fc-прерывистый масштаб адаптирует любой другой масштаб (например, линейный масштаб d3) и добавляет понятие разрывов. Эти разрывы определяются с помощью "поставщика прерывания", который может быть использован для создания одного или нескольких "зазоров" в масштабе.

Например, чтобы удалить диапазон, вы можете построить масштаб следующим образом:

var scale = scaleDiscontinuous(scaleLinear())
    .discontinuityProvider(discontinuityRange([50, 75]))

Вот полный пример, который показывает, как использовать это, чтобы создать "разрыв" в масштабе, чтобы отображать значения, имеющие большие пробелы в их общем диапазоне.

https://bl.ocks.org/ColinEberhardt/b60919a17c0b14d745c881f48effe681