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

Question

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

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

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

Answer 1

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

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

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

Вот быстрый и грязный proof of concept, который использует линейную шкалу .clamp(true), чтобы предотвратить заторможенность баров для значений вне домена.

Answer 2

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

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

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

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

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