Javascript 如何在D3条形图中添加分隔符

我的应用程序中有一个用D3绘制的条形图。下面添加了示例代码。在我的图表中，它显示了12个月时间段中的月份。因此，根据情况，十二月并不总是在x轴的拐角处。所以为了显示年份的分隔，我想在图表中显示一个分隔符来分隔两年。有什么办法可以做到吗。以下是我的要求的图像。有人知道怎么做吗

---

这里有一个简单的方法来添加一行和日期使用您现有的规模

// create a group for your line and date.
const dateLine = chart.append('g')
// position the group: xScale('Jan') is the left edge of the Jan rect, so it needs
// to be in the space between the Dec and Jen rect elements. That space is
// given by xScale.step(), the step size for each month, * the padding / 2
  .attr('transform', 'translate(' + (xScale('Jan') - xScale.step() * xScale.padding() * 0.5) + ', 0)')

// append a line, same height as the chart itself
dateLine.append('line')
  .attr('y2', height)

// append a text element with the year in it. You can change the x and y attributes
// to position it to your liking
dateLine.append('text')
  .text('2018')
  .attr('x', 20)
  .attr('y', 20)

const示例=[{
月份：'九月'，
数值：78.9，
颜色：'#000000'，
日期：2017年9月30日
},
{
月份：'十月'，
价值：75.1，
颜色：“#00a2ee”，
日期：2017年10月31日
},
{
月份：“11月”，
价值：68.0，
颜色：“#fbcb39”，
日期：2017年11月30日
},
{
月份：'Dec'，
价值：67.0，
颜色：“#007bc8”，
日期：2017年12月31日
},
{
月份：“一月”，
价值：65.6，
颜色：“#65cedb”，
日期：2018年1月31日
},
{
月份：'二月'，
价值：65.1，
颜色：“#ff6e52”，
日期：2018年2月28日
},
{
月份：'三月'，
价值：61.9，
颜色：“#f9de3f”，
日期：2018年3月31日
},
{
月份：'四月'，
价值：60.4，
颜色：“#5d2f8e”，
日期：2018年4月30日
},
{
月份：'五月'，
价值：59.6，
颜色：“#008fc9”，
日期：2018年5月31日
},
{
月份：'六月'，
价值：59.6，
颜色：“#507dca”，
日期：2018年6月30日
},
{
月份：'七月'，
数值：80.6，
颜色：“#507dca”，
日期：2018年7月31日
},
{
月份：“8月”，
价值：45.6，
颜色：“#507dca”，
日期：2018年8月31日
},
{
月份：'九月'，
价值：78.6，
颜色：“#507dca”，
日期：2018年9月30日
}
];
const svg=d3.select（'svg'）；
const svgContainer=d3.选择（“#容器”）；
常数裕度=80；
常数宽度=1000-2*边距；
常数高度=600-2*裕度；
const chart=svg.append（'g'）
.attr（'transform'，'translate（${margin}，${margin}）`）；
常量xScale=d3.scaleBand（）
.范围（[0，宽度]）
.domain（sample.map（（s）=>s.month））
.填充（0.4）
常量yScale=d3.scaleLinear（）
.范围（[高度，0]）
.域（[01100]）；
//垂直网格线
//const makeXLines=（）=>d3.axisBottom（）
//.scale（xScale）
常量makeYLines=（）=>d3.axisLeft（）
.刻度（yScale）
chart.append（'g'）
.attr（'transform'，'translate（0，${height}）`）
.call（d3.axisBottom（xScale））；
chart.append（'g'）
.call（d3.axisLeft（yScale））；
const dateLine=chart.append（'g'）
.attr（'transform'、'translate'）+
（xScale（'Jan'）-xScale.step（）*xScale.padding（）*0.5）+'，0'））
dateLine.append（'line'）
.attr（'y2'，高度）
dateLine.append（'text'）
.文本（'2018'）
.attr（'x'，20）
.attr（'y'，20）
//垂直网格线
//chart.append（'g'）
//.attr（'class'，'grid'）
//.attr（'transform'，'translate（0，${height}）`）
//.call（makeXLines（）
//.tickSize（-height，0，0）
//.tick格式（“”）
//   )
chart.append（'g'）
.attr（'class'，'grid'）
.call（makeYLines（）
.tickSize（-width，0，0）
.tick格式（“”）
)
const barGroups=chart.selectAll（）
.数据（样本）
.输入（）
.append（'g'）
barGroups
.append（'rect'）
.attr（'class'，'bar'）
.attr（'x'，（g）=>xScale（g.月））
.attr（'y'，（g）=>yScale（g.value））
.attr（'height'，（g）=>height-yScale（g.value））
.attr（'width'，xScale.bandwidth（））
.on（'mouseenter'，函数（实际值，i）{
d3.选择全部（“.value”）
.attr（'opacity'，0）
d3.选择（本）
.transition（）
.持续时间（300）
.attr（'opacity'，0.6）
.attr（'x'，（a）=>xScale（a.month）-5）
.attr（'width'，xScale.bandwidth（）+10）
常数y=yScale（实际值）
line=图表。追加（'line'）
.attr（'id'，'limit'）
.attr（'x1'，0）
.attr（'y1'，y）
.attr（'x2'，宽度）
.attr（'y2'，y）
barGroups.append（'text'）
.attr（'类'，'分歧'）
.attr（'x'，（a）=>xScale（a.month）+xScale.bandwidth（）/2）
.attr（'y'，（a）=>yScale（a.value）+30）
.attr（'填充'，'白色'）
.attr（'text-anchor'，'middle'）
.text（（a，idx）=>{
常数散度=（a.value-actual.value）.toFixed（1）
让文本=“”
如果（偏差>0）文本+='+'
text+=`${disference}%`
返回idx！==i？文本：“”；
})
})
.on（'mouseleave'，function（）{
d3.选择全部（“.value”）
.attr（'opacity'，1）
d3.选择（本）
.transition（）
.持续时间（300）
.attr（'opacity'，1）
.attr（'x'，（a）=>xScale（a.month））
.attr（'width'，xScale.bandwidth（））
图表。选择全部（“#限制”）。删除（）
chart.selectAll（'.disference'）.remove（）
})
barGroups
.append（'文本'）
.attr（'类'，'值'）
.attr（'x'，（a）=>xScale（a.month）+xScale.bandwidth（）/2）
.attr（'y'，（a）=>yScale（a.value）+30）
.attr（'text-anchor'，'middle'）
.text（（a）=>`${a.value}%`）
svg
.append（'文本'）
.attr（'类'，'标签'）
.attr（'x'，-（高度/2）-边距）
.attr（'y'，保证金/2.4）
.attr（'transform'、'rotate（-90'））
.attr（'text-anchor'，'middle'）
.text（'Love meter（%）'）
append（'text'）
.attr（'类'，'标签'）
.attr（'x'，宽度/2+边距）
.attr（'y'，高度+裕度*1.7）
.attr（'text-anchor'，'middle'）
.text（“月份”）
append（'text'）
.attr（'class'，'title'）
.attr（'x'，宽度/2+边距）
.attr（'y'，40）
.attr（'text-anchor'，'middle'）
.text（“2018年最受欢迎的编程语言”）
append（'text'）
.attr（'类'，'源'）
.attr（'x'，宽度-边距/2）
.attr（'y'，高度+裕度*1.7）
.attr（'text-anchor'，'start'）
.text（'来源：堆栈溢出，2018'）

正文{
字体系列：“开放式Sans”，无衬线；
}
分区布局{
文本对齐：居中；
}
分区#集装箱{
宽度：1000px；
高度：600px；
保证金：自动；
背景色：#2F4A6D；
}
svg{
宽度：100%；
身高：100%；
}
.酒吧{
填料：#80cbc4；
}
正文{
字体大小：12px；
填充：#fff；
}
路径{
笔画：灰色；
}
线{
笔画：灰色；
}
行#限制{
冲程：#FED966；
笔画宽度：3；
s
// create a group for your line and date.
const dateLine = chart.append('g')
// position the group: xScale('Jan') is the left edge of the Jan rect, so it needs
// to be in the space between the Dec and Jen rect elements. That space is
// given by xScale.step(), the step size for each month, * the padding / 2
  .attr('transform', 'translate(' + (xScale('Jan') - xScale.step() * xScale.padding() * 0.5) + ', 0)')

// append a line, same height as the chart itself
dateLine.append('line')
  .attr('y2', height)

// append a text element with the year in it. You can change the x and y attributes
// to position it to your liking
dateLine.append('text')
  .text('2018')
  .attr('x', 20)
  .attr('y', 20)