Я работаю над проектом React, который использует d3 (v3.5.9) для отображения финансовых графиков для конкретных таймфреймов (внутридневной, 1 недели, 1 месяца,…).В зависимости от таймфрейма я использую другую временную шкалу для тиков оси X.Я также использую d3fc scaleDiscontinuous, чтобы уменьшить пространство между моментами закрытия и открытия, чтобы удалить большие промежутки, но это полностью нарушает функциональность xAxis.ticks.
Что мне нужно вставить в .ticks() работать в сочетании с scaleDiscontinous?Например, для этого конкретного набора данных (внутридневного) я хотел бы, чтобы все часы отображались на оси x и, возможно, включали день каждого тика, на котором открывалась акция.
Я добавил рабочий образец в: https://codesandbox.io/s/affectionate-cherry-oegjq. Areachart.js содержит соответствующий код, xAxis - то, где построена ось, chartScales - то, где диапазоны свернуты.
Соответствующий фрагмент:
const xScale = scaleDiscontinuous(scaleLinear())
.discontinuityProvider(discontinuityRange(...collapsedRanges))
.domain(d3.extent(data, d => d.x))
.range([0, size.width]);
…
const x = d3.svg
.axis()
.scale(xScale)
.ticks(d3.time.hours) // removing this line shows some irregular scaling, custom function logs values, but x-axis remains empty
.tickSize(-height)
.orient("bottom");