Line chart point not aligned with x axis ticks D3.js

Question

Hi I have a line graph but the point indicated by the line aren't aligned with the x axis points, they seem to be in-between the points.

Anyone know that the cause could be and how to fix it?

I have added my code for this graph below. Please note that the code below was originally used for a bar chart. I am just trying to add lines to the bar chart. Therefore some bits of code may not seem relevant.

Thank you in advance!

  let barWidth;
  let labelLengths = [];

  const response = _.cloneDeep(payloadResponse);
  const d3ChartData = [];
  const horizontal = options.horizontal


  response.data.forEach(m => {
    m.metric0 = parseFloat(m.metric0);
  });

  const total = _.sumBy(response.data, 'metric0')
  const { percentValues } = options;

  
  const metrics = [];
  response.metrics.forEach(m => {
    metrics.push({ key: Object.keys(m)[0], name: Object.values(m)[0] });
  });

  const dimensions = [];
  response.dims.forEach(d => {
    dimensions.push({ key: Object.keys(d)[0], name: Object.values(d)[0] });
  });

  response.data.forEach(row => {
    const newobject = {};
    newobject["category"] = row[dimensions[0].key];
    newobject["values"] = row[metrics[0].key];//Y axis metrics
    metrics.forEach((s, i) => {
      row[metrics[i].key] = percentValues ? percentage(row[metrics[i].key] / total) : row[metrics[i].key]
      newobject[s.name] = row[metrics[i].key]
    })
    d3ChartData.push(newobject)
  })

  // List of groups = species here = value of the first column called group -> show them on the X axis
  const groups = d3.map(d3ChartData, function (d) { return d["category"] }).keys();
  const valueGroups = d3.map(d3ChartData, function (d) { return d["values"] }).keys();//Y axis group
  subgroups = d3.map(metrics, function (d) { return d["name"] }).keys();
  subgroups = _.sortBy(subgroups);

  const newdataset = d3ChartData;

  const maxarray = [];
  metrics.forEach((s, i) => {
    maxarray.push((Math.max.apply(Math, response.data.map(function (o) {
      return Math.round(o[metrics[i].key]);
    }))))
  })

  // set the dimensions and margins of the graph
  let max = Math.max.apply(Math, maxarray)
  console.log("max","",max);
  max = max * 1.1;

  let longestLabel = Math.max.apply(Math, maxarray).toString().length;
  if(longestLabel < 5)
    {
      longestLabel = 5;
    }

  let chartBottom = Math.max(...(groups.map(el => el.length)));


  let longestValue = Math.max(...(valueGroups.map(el => Math.trunc(el).toString().length)));


  let ySpacing = longestValue*10 >= 60 ? longestValue*10 == 70 ? longestValue*( (10 + Math.ceil(longestValue/3))+3) : longestValue*( (10 + Math.ceil(longestValue/3) )) : 80;

  let margin = { top: 10, right: 20, bottom: horizontal ? ySpacing<150 ? ySpacing : 130 : chartBottom < 14 ? 100 : (chartBottom * 8), left: !horizontal ? ySpacing  : chartBottom < 14 ? 100 : (chartBottom * 8)},
      width = 340,
      height = 310;

  // append the svg object to the body of the page
  let svg = d3.select('#result-chart-' + response.chartNo)
    .append("svg")
    .attr("id", "svg-chart-" + response.chartNo)
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  let sizeDimensions = {
      margin: margin,
      height: height,
      width: width
    }
  let svgCanvas = d3.select('#svg-chart-' + response.chartNo)

  let x, y;


    // Add X axis
    x = d3.scaleBand()
      .domain(groups)
      .range([0, width])

    // Add Y axis
    y = d3.scaleLinear()
      .domain([0, max])
      .range([height, 0]);

    let makeYLines = () => d3.axisRight()
      .scale(y);
    svg.append('g')
      .attr('transform', `translate(${width}, 0)`)
      .attr("class", "gridlines")
      .call(makeYLines().tickSize(-width, 0, 0).tickFormat(''));
  



  svg.append("g")
    .call(d3.axisLeft(y).tickSizeOuter(0))
    .selectAll("text")
    .attr("class", "axis-text")
    //.attr("transform", function (d) {return !horizontal ? "rotate(0)" : "rotate(-30)"})
    .attr("text-anchor", "end");

  // Another scale for subgroup position?
  let xSubgroup = d3.scaleBand()
    .domain(subgroups)
    .range([0, (!horizontal ? x.bandwidth() : y.bandwidth())])
    .padding([0.05])

  // color palette = one color per subgroup
  let color = d3.scaleOrdinal()
    .domain(subgroups)
    .range(_config.theme)

  let tooltip = d3.select('#chatbot-message-container')
    .append("div")
    .attr("class", "toolTip")
    .style("border-color", _config.theme[0]);


    //============================================
    //line chart start

      let line = d3.line()
        .x(function(d) { return x(d.category)})
        .y(function(d) { return y(d.values) })


    svg.append("path")
      .datum(newdataset)
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-width", 1.5)
      .attr("d", line)

      let line2 = d3.line()
      .x(function(d) { return x(d.category)})
      .y(function(d) { return y(d.Leavers) })

      svg.append("path")
      .datum(newdataset)
      .attr("fill", "none")
      .attr("stroke", "red")
      .attr("stroke-width", 1.5)
      .attr("d", line2)


    //============================================
    //line chart end



  //gets width of each bar
  svg.selectAll('rect') // select all the text elements 
  .each(function(d){ barWidth = this.getBBox().width})


  svg.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x).tickSizeOuter(0))
  .selectAll("text")
  .each(function(d){ labelLengths.push(this.getBBox().width)})
  .attr("transform", function (d) {return horizontal ? percentValues ? "rotate(0)" : longestValue < 2 ? "rotate(0)" : "rotate(270)" : barWidth>Math.max(...labelLengths) ? "rotate(0)" : "rotate(270)"})
  .attr("y", function (d) {return horizontal ? percentValues ? 8 : longestValue < 2 ? 8 : -4 : barWidth>Math.max(...labelLengths) ? 8 : -4})
  .attr("x", function (d) {return horizontal ? percentValues ? 0 : longestValue < 2 ? 0 : -7 : barWidth>Math.max(...labelLengths) ? 0 : -7})
  .attr("class", "axis-text x-axis-text")
  .attr("text-anchor", function (d) {return horizontal ? percentValues ? "middle" : longestValue < 2 ? "middle" : "end" : barWidth>Math.max(...labelLengths) ? "middle" : "end"});


  // Animation
  svg.selectAll("rect")
    .transition()
    .duration(1000)
    .ease(d3.easePoly)
    .attr(!horizontal ? "y" : "x", function (d) {
      return !horizontal ? y(d.value) : x(0);
    })
    .attr(!horizontal ? "height" : "width", function (d) {
      return !horizontal ? (height - y(d.value)) : (x(d.value))
    })
    .delay(function (d, i) { return (i * 30) })

  if (metrics.length > 1) {
    buildLegend(svgCanvas, color, subgroups, sizeDimensions, 15, tooltip, 'result-chart-' + response.chartNo, response.chartNo);
  } else {
    buildAxisNames(svgCanvas, metrics, options, sizeDimensions);
  }


  

UPDATE:

I found some sources mentioning using scalePoint, this worked perfectly for the line but broke the bars when reintroducing the code responsible for drawing them. I can only assume that this is because bar charts need to used scaleBand() ?

I then looked into changing the paddingInner/outer after finding this great resource on scaleBand() https://observablehq.com/@d3/d3-scaleband

Changing the padding as so seemed to work great for the line:

 x = d3.scaleBand()
  .domain(groups)
  .range([0, width])
  .paddingOuter(0.2)
  .paddingInner(0.9)

But when adding the bars back in they were also changed:

The bars should actually look like this:

My next thought is to introduce a second x variable, eg: x2 and set a different paddingInner/outer for that so that both the line an d bars are using different x's. Is this the correct approach?

I understand that it may be difficult help/debug with this issue as I havened added a jsfiddle. This is simple due to me not having access to the data, I will see if I can hardcode some example data. Until then I hope someone can help with this.

UPDATE: JsFiddle with code found here https://jsfiddle.net/MBanski/0ke5u3qy/1/