如何在d3中对平行坐标图中的线条进行着色？

// 假设已有平行坐标图的SVG元素和数据
const svg = d3.select("svg");
const data = [
  { attr1: 10, attr2: 20, attr3: 30, colorAttr: "category1" },
  { attr1: 15, attr2: 25, attr3: 35, colorAttr: "category2" },
  // 更多数据...
];

// 创建颜色比例尺
const colorScale = d3.scaleOrdinal()
  .domain(["category1", "category2"]) // 根据实际数据进行设置
  .range(["#ff0000", "#00ff00"]); // 设置颜色范围

// 为每个数据对象添加颜色属性
data.forEach(d => {
  d.color = colorScale(d.colorAttr);
});

// 创建路径生成器
const path = d3.line();

// 绘制平行坐标图线条，并设置样式属性
svg.selectAll("path")
  .data(data)
  .enter()
  .append("path")
  .attr("d", d => path([[attr1Scale(d.attr1), y1],
                       [attr2Scale(d.attr2), y2],
                       [attr3Scale(d.attr3), y3]])) // 根据实际设置坐标值
  .style("stroke", d => d.color);