D3 Непрерывный срок Домен дает пробелы по оси X

Question

Я хочу построить некоторые временные ряды данных, которые не являются непрерывными (пробелы в датах для выходных, праздников и т. Д.). Это ежедневные данные.

данные выглядит примерно так:

date,value 
1/2/15,109.33 
1/5/15,106.25 
1/6/15,106.26 
1/7/15,107.75 
1/8/15,111.89 
1/9/15,112.01 
1/12/15,109.25 
1/13/15,110.22 
... 

Так я определяю мой x и yscales:

var x = d3.time.scale().range([0, width]); 
var y = d3.scale.linear().range([height, 0]); 

И установить домен из моего источника данных:

x.domain(d3.extent(data, function(d) { return d.date; })); 
y.domain(d3.extent(data, function(d) { return d.value; })); 

проблема заключается в том, что мои даты имеют пробелы в им. И теперь моя ось x включает в себя те отсутствующие даты (d3.time.scale() делает это автоматически, я думаю, потому что она отображается в непрерывном диапазоне?).

.extent() находит максимальное и минимальное значения в date, тогда .domain() возвращает эти значения max и min в качестве диапазона для оси x. Но я не уверен, как справиться с пробелами и вернуть даты отсутствия пробелов в диапазон.

Итак, мой вопрос: как я могу использовать диапазон по оси x только в датах, которые находятся в моем наборе данных? И не «заполнить пробелы». Должен ли я играть с d3.time.scale().range()? или мне нужно использовать другой scale?

Каков правильный способ сделать это? Может ли кто-нибудь указать мне в правильном направлении или привести пример? Спасибо!

Также, пожалуйста, я хочу решить с помощью простого d3 и javascript. Я не заинтересован в использовании каких-либо сторонних библиотек абстракции.

Answer 1

Как указывает Ларс Коттоф, вы можете создать ординальную ось x, которая «выглядит» как временная шкала. Предполагая, что вы хотите построить временные ряды в виде строки, вот пример: http://jsfiddle.net/ee2todev/3Lu46oqg/

Если вы хотите настроить формат для дат, например. представить дату как день (недели), день и месяц, вы должны сначала перенести свою строку на дату. Я добавил один пример, который форматирует даты в общем немецком формате. Но вы можете легко настроить код на свои нужды. http://jsfiddle.net/ee2todev/phLbk0hf/

последнее, но не менее, вы можете использовать

axis.tickValues([values]) 

выбрать даты, которые вы хотите отобразить. См. Также: https://github.com/mbostock/d3/wiki/SVG-Axes#tickFormat

Answer 2

Компонент d3fc-discontinuous-scale адаптирует любую другую шкалу (например, временную шкалу d3) и добавляет понятие разрывов.

Эти разрывы определяются через «поставщика прерываний», встроенный в discontinuitySkipWeekends позволяет пропустить выходные.

Вот пример:

const skipWeekendScale = fc.scaleDiscontinuous(d3.scaleTime()) 
    .discontinuityProvider(fc.discontinuitySkipWeekends()); 

А вот полный демо: https://bl.ocks.org/ColinEberhardt/0a5cc7ca6c256dcd6ef1e2e7ffa468d4