d3.js: Path intersects axis in between ticks

Question

I'm creating a parallel coordinate graph as shown in Mikes example here.

It seems that the bandScale I am using for categorical (string) data is offset 1/2 of the space between ticks. The paths are not intersecting with the ticks that represent the category they belong to, they are intersecting between. What am I doing wrong that may cause this?

Below is the methods responsible for plotting the dimensions. Note: this.dimensions is an object holding the name of the dimension, along with the respective scale.

  plotPathGroup(className: string, data) {
    return this.svg.append("g")
      .attr("class", className)
      .selectAll("path")
      .data(data)
      .enter().append("path")
      .attr("d", this.path.bind(this));
  },

  path(d) {
    const scaleMap = this.keys.map(key => [
      this.x(key),
      this.dimensions[key](d[key])
    ]);
    return d3.line()(scaleMap);
  },

  catDimensionScale(data, key) {
    return d3.scaleBand()
      .domain(data.map(d => d[key]))
      .range([this.size.h, 0]);
  },

Answer 1

A band scale is not the correct tool for this. The problem is that, as its very name implies, a band scale has a bandwidth.

You should use a point scale instead. As the API says,

Point scales are a variant of band scales with the bandwidth fixed to zero.

So, your code should be:

catDimensionScale(data, key) {
    return d3.scalePoint()
        .domain(data.map(d => d[key]))
        .range([this.size.h, 0]);
}