问题描述
编辑:问题已解决
苦涩的见解:我做错了翻译:轴错误地向右移动。 解决方案
.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 吗?
在复制的波段刻度上设置填充的不同方法会产生不同的结果,但不会产生居中的刻度。另外我想知道左边的第一个刻度,为什么在那里?尝试 point scale 也没有用。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)