如何将缩放图表中的链接更改为折叠线？

const data = [
  { x: 1, y: 5, isCollapsible: true },
  { x: 2, y: 9, isCollapsible: false },
  { x: 3, y: 7, isCollapsible: true },
  // ...更多数据点
];

const line = d3.line()
  .x(d => xScale(d.x))
  .y(d => yScale(d.y));

svg.append("path")
  .datum(data)
  .attr("class", "line")
  .attr("d", line);

data.forEach((d, i) => {
  if (d.isCollapsible) {
    svg.append("circle")
      .attr("cx", xScale(d.x))
      .attr("cy", yScale(d.y))
      .attr("r", 5)
      .style("fill", "blue")
      .on("click", function() {
        toggleCollapse(i); // 自定义函数来切换折叠状态
      });
  }
});

function toggleCollapse(index) {
  // 更新数据中的折叠状态
  data[index].isCollapsed = !data[index].isCollapsed;
  
  // 重新绘制受影响的链接部分
  redrawChart();
}

function redrawChart() {
  const pathData = data.map((d, i) => {
    if (d.isCollapsed && i > 0 && data[i - 1].isCollapsed) {
      return null; // 跳过折叠的部分
    }
    return [d.x, d.y];
  }).filter(Boolean); // 移除null值

  svg.select(".line")
    .datum(pathData)
    .attr("d", line);
}