在曲线图之外添加组符号

// 假设我们有一些数据和对应的组别
const data = [
  { group: 'A', value: 10 },
  { group: 'B', value: 20 },
  { group: 'A', value: 15 },
  { group: 'B', value: 25 }
];

// 创建SVG容器
const svg = d3.select("body").append("svg")
    .attr("width", 500)
    .attr("height", 300);

// 定义颜色比例尺
const color = d3.scaleOrdinal(d3.schemeCategory10)
    .domain(data.map(d => d.group));

// 绘制曲线图
const line = d3.line()
    .x((d, i) => i * 50 + 50)
    .y(d => 250 - d.value);

svg.append("path")
    .datum(data)
    .attr("fill", "none")
    .attr("stroke", d => color(d.group))
    .attr("stroke-width", 2)
    .attr("d", line);

// 添加组符号
data.forEach((d, i) => {
  svg.append("circle")
      .attr("cx", i * 50 + 50)
      .attr("cy", 250 - d.value)
      .attr("r", 5)
      .attr("fill", color(d.group));

  // 添加组别标签
  svg.append("text")
      .attr("x", i * 50 + 50)
      .attr("y", 270)
      .attr("text-anchor", "middle")
      .text(d.group);
});