d3.js：路径在刻度之间与轴相交

Question

我正在创建一个平行坐标图，如 Mikes 示例中所示 here。

我用于分类（字符串）数据的 bandScale 似乎偏移了刻度之间 space 的 1/2。路径不与表示它们所属类别的刻度线相交，它们在两者之间相交。我做错了什么可能会导致这种情况？

以下是负责绘制维度的方法。注意：this.dimensions 是一个包含维度名称以及相应比例的对象。

  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

乐队规模不是正确的工具。问题在于，顾名思义，波段刻度具有带宽。

您应该改用磅秤。正如 API 所说，

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

所以，您的代码应该是：

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

d3.js：路径在刻度之间与轴相交

d3.js: Path intersects axis in between ticks

javascript

graph

scale

d3.js