如何在d3.js中左对齐记号？

我需要左对齐月份刻度。我不能用硬编码的值来改变它们，因为每个月的周数不是恒定的

这里有这么多这样的问题，但没有一个有有效的答案。这似乎是一个很常见的问题，也许有一个内置的函数，我不知道它能帮我解决这个问题

还请注意，每个月的周数是可变的，但月间隔是恒定的。我怎样才能解决这个问题

编辑：

x2=d3.scalePoint（）.rangeRound（[0，宽度]）。填充（0）

左对齐整组月份刻度。但这意味着只有第一个记号正确定位

.酒吧{
填充：钢蓝
}
.bar:悬停{
填充物：棕色
}
.线路{
填充：无；
中风：午夜蓝色；
笔划宽度：.5px；
}
`使用严格的`；
（异步o=>{
让svg=d3.select（`svg`）
让边距={top:20，right:20，bottom:30，left:50}
让width=+svg.attr（`width`）-margin.left-margin.right
让height=+svg.attr（`height`）-margin.top-margin.bottom
高度-=100
设g=svg.append（`g`）.attr（`transform`，`translate（${margin.left}，${margin.top}）`）
设x=d3.scaleBand（）
.rangeRound（[0，宽度]）
.填充（0.1）
设x2=d3.scaleBand（）
.rangeRound（[0，宽度]）
.填充（0.1）
设y=d3.scaleLinear（）
.rangeRound（[高度，0]）
让数据=[{“周”：“2019年7月1日”，“利润”：“100”{“周”：“2019年7月8日”，“利润”：“394”}，“周”：“2019年8月3日”，“利润”：“395”}，“周”：“2019年8月14日”，“利润”：“112”{“周”：“2019年8月24日”，“利润”：“488”{“周”：“2019年9月7日”，“利润”：“123”{“周”：“2019年9月14日”，“利润”：“2019年9月21日”，“利润”：“周”：“2019年9月22日”，“利润”：“604”{“周”：“2019年9月23日”，“利润”：“788”}，{“周”：“2019年10月10日”，“利润”：“433”}，{“周”：“2019年10月11日”，“利润”：“100”}]
功能设置周（周）{
让数据=周分割（`u`）
返回{月：基准[0]，日：+基准[1]，年：+基准[2]}
}
x、 域（data.map（o=>o.week））
域（data.map（o=>formatWeek（o.week.month））
y、 域（[0，d3.max（数据，o=>Number（o.profice）））
g、 附加（`g`）
.attr（`transform`、`translate（0，${height}）`）
.call（d3.axisBottom（x）.tickFormat（o=>`${formatWeek（o.month}${formatWeek（o.day}，${formatWeek（o.year}'））
.selectAll（`text`）
.style（`text anchor`、`end`）
.attr（`dx`、`-1em`）
.attr（`dy`、`0.5em`）
.attr（`transform`，d=>`rotate（-90）`）
g、 附加（`g`）
.呼叫（d3.axisTop（x2））
.selectAll（`text`）
.style（`text anchor`、`end`）
g、 附加（`g`）
.呼叫（d3.左（y））
.append（`text`）
.attr（`fill`、`000`）
.attr（`transform`、`rotate（-90）`）
.attr（`y`，6）
.attr（`dy`，`0.71em`）
.attr（`text anchor`、`end`）
.text（`profit`）
g、 选择全部（`.bar`）
.数据（数据）
.enter（）.append（`rect`）
.attr（`class`、`bar`）
.attr（`x`，o=>x（o.week））
.attr（`y`，o=>y（数字（o.profice）））
.attr（`width`，x.bandwidth（））
.attr（`height`，o=>height-y（数字（o.profict）））
函数make_y_gridlines（）{返回d3.axisTop（x2）}
g、 附加（`g`）
.attr（`class`，`line`）
.call（生成网格线（）.tickSize（-width）.tickFormat（``）
})()

您可以根据每个月第一个条形图的x位置调整刻度。在

x.domain（data.map（o=>o.week））下，无需过多更改代码即可添加：

// get month names and first bar in month
let monthNames = d3.set(data.map(o => formatWeek(o.week).month)).values(),
    monthVals = monthNames.map(function(d) {  return data.filter(function(e) {  return e.week.match(d) != null })[0].week});

x2.domain(monthVals)

然后将对顶轴和网格线的调用更改为：

g.append(`g`)
  .call(d3.axisTop(x2).tickValues(monthNames))
  .call(function(context) {
        // bind the first months to the ticks and adjust
        var ticks = context.selectAll('.tick')
        .data(monthVals)
        .attr('transform', function(d) { return 'translate(' + x(d) + ',0)' })

   })
  .selectAll(`text`)
  .style(`text-anchor`, `end`)

以及：

您可以根据每个月第一个条形图的x位置调整刻度。在
x.domain（data.map（o=>o.week））
add下，无需过多更改代码：

// get month names and first bar in month
let monthNames = d3.set(data.map(o => formatWeek(o.week).month)).values(),
    monthVals = monthNames.map(function(d) {  return data.filter(function(e) {  return e.week.match(d) != null })[0].week});

x2.domain(monthVals)

然后将对顶轴和网格线的调用更改为：

g.append(`g`)
  .call(d3.axisTop(x2).tickValues(monthNames))
  .call(function(context) {
        // bind the first months to the ticks and adjust
        var ticks = context.selectAll('.tick')
        .data(monthVals)
        .attr('transform', function(d) { return 'translate(' + x(d) + ',0)' })

   })
  .selectAll(`text`)
  .style(`text-anchor`, `end`)

以及：

不清楚“记号”是什么意思。蓝色图表条、月与月之间的分隔线或月的顶部标签（“7月”、“8月”和…）？请提供带有所需对齐的静态图片。不清楚“记号”是什么意思。蓝色图表条、月与月之间的分隔线或月的顶部标签（'July'、'August'、…）？请提供带有所需对齐的静态图片