D3条形图使用路径绘制水平线

Question

我有一个条形图，该条形图使用一组对象并使用d3提供的path方法将一条条形图用水平线吐出。问题是，当数据池较小时，水平线不会延伸到整个图形。我不确定如何解决此问题。我有工作代码https://codesandbox.io/s/88onwvrm80。

我的数据如下：

const data = [
  { activity: "Main Idea and Detail", value: 90, color: "#2A78E4" },
  { activity: "Character and Plot", value: 80, color: "#2A78E4" },
  { activity: "Elements of Poetry", value: 70, color: "#2A78E4" },
  { activity: "Standard 8.10", value: 60, color: "#2A78E4" },
  { activity: "8.1.3", value: 50, color: "#2A78E4" },
  { activity: "Skill 6", value: 40, color: "#2A78E4" },
  { activity: "Skill 7", value: 30, color: "#2A78E4" },
  { activity: "Skill 8", value: 21, color: "#2A78E4" },
  { activity: "Skill 9", value: 10, color: "#2A78E4" },
  { activity: "Skill 10", value: 5, color: "#2A78E4" },
  { activity: "8.1.34", value: 50, color: "#2A78E4" },
  { activity: "Skill 60", value: 40, color: "#2A78E4" },
  { activity: "Skill 70", value: 30, color: "#2A78E4" },
  { activity: "Skill 80", value: 21, color: "#2A78E4" },
  { activity: "Skill 90", value: 10, color: "#2A78E4" },
  { activity: "Skill 100", value: 5, color: "#2A78E4" },
  { activity: "Skill 900", value: 100, color: "#2A78E4" },
  { activity: "Skill 1000", value: 50, color: "#2A78E4" },
  { activity: "Skill -1", value: 5, color: "#2A78E4" },
  { activity: "8.1.35", value: 50, color: "#2A78E4" },
  { activity: "Skill 160", value: 40, color: "#2A78E4" },
  { activity: "Skill 10", value: 30, color: "#2A78E4" },
  { activity: "Skill 20", value: 21, color: "#2A78E4" },
  { activity: "Skill 80", value: 10, color: "#2A78E4" },
  { activity: "Skill 650", value: 5, color: "#2A78E4" },
  { activity: "Skill 300", value: 100, color: "#2A78E4" },
  { activity: "Skill 3000", value: 50, color: "#2A78E4" }
];

如果我从数组中删除多个对象，则该行不再延伸到整个图形。

我的路径如下：

if (data) {
      path = d3
        .line()
        .x((info, index) => {
          return xScales(info.activity) * index;
        })
        .y(() => {
          return yScales(baseLine - 1.2);
        });
    }

以及实际图表

 <svg width={1500} height={height} className={styles.svg} ref="svg">
            >
            {data.map((data, index) => {
              return (
                <rect
                  key={index}
                  width={xScales.bandwidth()}
                  x={xScales(data.activity)}
                  y={yScales(data.value)}
                  fill={data.color}
                  height={height - margin.bottom - yScales(data.value)}
                  onClick={() => {
                    this.props.updateSelectedBarColor(index);
                    this.props.onBarClick();
                  }}
                />
              );
            })}
            <g
              ref="xAxis"
              transform={`translate(0,${height - margin.bottom})`}
              className={styles.axisBottom}
            />
            <g ref="yAxis" transform={`translate(${margin.left} ,5)`} />
            <path
              d={path(data)}
              className={styles.baseLine}
              style={{
                strokeWidth: 2,
                stroke: `${baseLineColor}`
              }}
              id="myPath"
            />