Estou tendo um gráfico de barras no meu aplicativo que foi desenhado usando D3. O código de exemplo foi adicionado abaixo. No meu gráfico, ele mostra meses em um período de 12 meses. Portanto, dependendo da situação, dezembro nem sempre chega ao canto do eixo x. Então, para mostrar a separação do ano, quero mostrar um separador no gráfico para separar dois anos. Existe uma maneira de fazer isso? A seguir, é apresentada uma imagem da minha exigência. Alguém sabe como fazer isso

https: //jsfiddle.net/yasirunilan/w7h81xz2/748

        const sample = [{
    month: 'Sep',
    value: 78.9,
    color: '#000000',
    date: '30/09/17'
  },
  {
    month: 'Oct',
    value: 75.1,
    color: '#00a2ee',
    date: '31/10/17'
  },
  {
    month: 'Nov',
    value: 68.0,
    color: '#fbcb39',
    date: '30/11/17'
  },
  {
    month: 'Dec',
    value: 67.0,
    color: '#007bc8',
    date: '31/12/17'
  },
  {
    month: 'Jan',
    value: 65.6,
    color: '#65cedb',
    date: '31/01/18'
  },
  {
    month: 'Feb',
    value: 65.1,
    color: '#ff6e52',
    date: '28/02/18'
  },
  {
    month: 'Mar',
    value: 61.9,
    color: '#f9de3f',
    date: '31/03/18'
  },
  {
    month: 'Apr',
    value: 60.4,
    color: '#5d2f8e',
    date: '30/04/18'
  },
  {
    month: 'May',
    value: 59.6,
    color: '#008fc9',
    date: '31/05/18'
  },
  {
    month: 'Jun',
    value: 59.6,
    color: '#507dca',
    date: '30/06/18'
  },
  {
    month: 'Jul',
    value: 80.6,
    color: '#507dca',
    date: '31/07/18'
  },
  {
    month: 'Aug',
    value: 45.6,
    color: '#507dca',
    date: '31/08/18'
  },
  {
    month: 'Sep ',
    value: 78.6,
    color: '#507dca',
    date: '30/09/18'
  }
];

const svg = d3.select('svg');
const svgContainer = d3.select('#container');

const margin = 80;
const width = 1000 - 2 * margin;
const height = 600 - 2 * margin;

const chart = svg.append('g')
  .attr('transform', `translate(${margin}, ${margin})`);

const xScale = d3.scaleBand()
  .range([0, width])
  .domain(sample.map((s) => s.month))
  .padding(0.4)

const yScale = d3.scaleLinear()
  .range([height, 0])
  .domain([0, 100]);

// vertical grid lines
// const makeXLines = () => d3.axisBottom()
//   .scale(xScale)

const makeYLines = () => d3.axisLeft()
  .scale(yScale)

chart.append('g')
  .attr('transform', `translate(0, ${height})`)
  .call(d3.axisBottom(xScale));

chart.append('g')
  .call(d3.axisLeft(yScale));

// vertical grid lines
// chart.append('g')
//   .attr('class', 'grid')
//   .attr('transform', `translate(0, ${height})`)
//   .call(makeXLines()
//     .tickSize(-height, 0, 0)
//     .tickFormat('')
//   )

chart.append('g')
  .attr('class', 'grid')
  .call(makeYLines()
    .tickSize(-width, 0, 0)
    .tickFormat('')
  )

const barGroups = chart.selectAll()
  .data(sample)
  .enter()
  .append('g')

barGroups
  .append('rect')
  .attr('class', 'bar')
  .attr('x', (g) => xScale(g.month))
  .attr('y', (g) => yScale(g.value))
  .attr('height', (g) => height - yScale(g.value))
  .attr('width', xScale.bandwidth())
  .on('mouseenter', function(actual, i) {
    d3.selectAll('.value')
      .attr('opacity', 0)

    d3.select(this)
      .transition()
      .duration(300)
      .attr('opacity', 0.6)
      .attr('x', (a) => xScale(a.month) - 5)
      .attr('width', xScale.bandwidth() + 10)

    const y = yScale(actual.value)

    line = chart.append('line')
      .attr('id', 'limit')
      .attr('x1', 0)
      .attr('y1', y)
      .attr('x2', width)
      .attr('y2', y)

    barGroups.append('text')
      .attr('class', 'divergence')
      .attr('x', (a) => xScale(a.month) + xScale.bandwidth() / 2)
      .attr('y', (a) => yScale(a.value) + 30)
      .attr('fill', 'white')
      .attr('text-anchor', 'middle')
      .text((a, idx) => {
        const divergence = (a.value - actual.value).toFixed(1)

        let text = ''
        if (divergence > 0) text += '+'
        text += `${divergence}%`

        return idx !== i ? text : '';
      })

  })
  .on('mouseleave', function() {
    d3.selectAll('.value')
      .attr('opacity', 1)

    d3.select(this)
      .transition()
      .duration(300)
      .attr('opacity', 1)
      .attr('x', (a) => xScale(a.month))
      .attr('width', xScale.bandwidth())

    chart.selectAll('#limit').remove()
    chart.selectAll('.divergence').remove()
  })

barGroups
  .append('text')
  .attr('class', 'value')
  .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('text')
  .attr('class', 'label')
  .attr('x', -(height / 2) - margin)
  .attr('y', margin / 2.4)
  .attr('transform', 'rotate(-90)')
  .attr('text-anchor', 'middle')
  .text('Love meter (%)')

svg.append('text')
  .attr('class', 'label')
  .attr('x', width / 2 + margin)
  .attr('y', height + margin * 1.7)
  .attr('text-anchor', 'middle')
  .text('Months')

svg.append('text')
  .attr('class', 'title')
  .attr('x', width / 2 + margin)
  .attr('y', 40)
  .attr('text-anchor', 'middle')
  .text('Most loved programming languages in 2018')

svg.append('text')
  .attr('class', 'source')
  .attr('x', width - margin / 2)
  .attr('y', height + margin * 1.7)
  .attr('text-anchor', 'start')
  .text('Source: Stack Overflow, 2018')