Мне нужна помощь в создании диаграммы BarLine с датами по оси X.Я постараюсь как можно яснее объяснить, что происходит, но у меня нет большого опыта в D3, поэтому я могу в итоге сказать или явно сделать что-то не так.
Я используюtimeScale для создания шкалы для оси X с использованием этого шаблона:
d3ScaleTime()
.domain(d3Extent(data, ({ name }) => new Date(name)))
.range([width / data.length / 1.8, width - width / data.length / 1.8]);
Эта часть кода (width / data.length / 1.8) - это просто исправление, которое я применяю, чтобы получить правильный диапазон длясвободного места, в противном случае график будет выглядеть следующим образом:
Как вы можете видеть на изображении выше, боковые полосы рисуются внеграницы графика, даже если галочки выглядят правильно.Вот почему я применяю исправление, и после этого график выглядит так:
Теперь позиция баров выглядит так же, как и позициягалочки, но начало и конец пути отсутствуют, поэтому у меня есть другая проблема.Мое решение для этого состоит в том, чтобы взять путь по оси X и расширить его, используя:
d3Select('.axis-x path.domain').attr('d', () => `M0,0.5V0.5H${width}`)
Ничего сумасшедшего здесь не происходит, но после расширения пути у меня есть ось X, которая выглядит следующим образом:
Теперь, наконец, все выглядит правильно, поэтому я могу перейти к следующей части графика, которая создает линии графика BarLine.
Я не ожидал, что все пройдет гладко, но я застрял, потому что когда я рисую линию, я получаю линию, которая не заполняет всю ширину графика, потому что timeScale устанавливает началодиапазона в середине бара благодаря начальному исправлению, которое я показал ранее (width / data.length / 1.8), как вы можете видеть на следующем изображении:
Теперь мне действительно нужна помощь, чтобы это исправить.Неважно, нужно ли мне расширять линию так же, как я делаю путь по оси X (что я не знаю, как это сделать) или, возможно, исправить предыдущую ошибку, которую мне не хватает, чтобы определитьв моем коде.
Примечание: весь код довольно большой и модульный, чтобы разместить его целиком здесь, но если вы хотите увидеть что-нибудь, просто спросите, и я постараюсь предоставить столько жеподробно, как я могу с некоторыми обновлениями.