Изменить: проблема решена
Горькое озарение: я сделал перевод неправильно: ось неправильно смещена вправо. Решение .attr('transform', translate(0,${input.height - margins.current.bottom}))
Исходное сообщение
Я не понимаю, как правильно расположить деления моей оси x. Галочки должны располагаться по центру прямо под столбцами.
С помощью d3 я создаю band scale для правильной ширины столбцов, и я хотел бы повторно использовать его для оси x.
Код
// data
data [
{
"year": "2021",
"value": 7.81335178927304
},
{
"year": "2022",
"value": 7.103485903424945
},
{
"year": "2023",
"value": 6.393620017576849
}
// [...]
]
// original band scale
const xScale = scaleBand()
.domain(yearsData.map((d) :string => d.year))
.rangeRound([0, (input.width - margins.current.left - margins.current.right)])
.padding(0.1);
// creating the x-axis
const xAxis = axisBottom(xScale.copy().padding(0.5).align(0));
const xAxisGroup = chartGroup.append('g')
.attr('class', 'x-axis')
.call(xAxis)
// move the whole axis down, variables do not matter here
.attr('transform', `translate(${margins.current.left},${input.height - margins.current.bottom})`)
Результат
Нужно ли здесь использовать timeScale?
Различные способы установки отступов на скопированной шкале каналов дают разные результаты, но не центрируют деления. Также меня интересует самая первая галочка слева, зачем она там? Попытка точечной шкалы не сработала. , слишком.
