更改插拔折线图中的标记形状

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

// 示例数据
const data = [
    {x: 10, y: 50, shape: "circle"},
    {x: 20, y: 80, shape: "square"},
    {x: 30, y: 30, shape: "triangle-up"},
    {x: 40, y: 60, shape: "star"},
    {x: 50, y: 90, shape: "diamond"}
];

// 创建折线生成器
const line = d3.line()
    .x(d => d.x)
    .y(d => d.y);

// 绘制折线
svg.append("path")
    .datum(data)
    .attr("fill", "none")
    .attr("stroke", "steelblue")
    .attr("stroke-width", 2)
    .attr("d", line);

// 绘制标记
svg.selectAll(".marker")
    .data(data)
    .enter().append("circle")
    .attr("class", "marker")
    .attr("cx", d => d.x)
    .attr("cy", d => d.y)
    .attr("r", 5)
    .attr("fill", "steelblue");

// 更改标记形状
svg.selectAll(".marker")
    .data(data)
    .enter().append("path")
    .attr("d", d => {
        switch (d.shape) {
            case "circle":
                return `M${d.x},${d.y} m-5,0 a 5,5 0 1,0 10,0 a 5,5 0 1,0 -10,0`;
            case "square":
                return `M${d.x},${d.y} h-5 v-5 h5 v5 z`;
            case "triangle-up":
                return `M${d.x},${d.y} l-5,10 5,-10 z`;
            case "star":
                return `M${d.x},${d.y} l2.5,-8.66 l8.66,5 l-6.11,9.77 l1.11,-8.95 l-7.11,-4.77 z`;
            case "diamond":
                return `M${d.x},${d.y} l-5,-5 5,-5 5,5 -5,5 z`;
        }
    })
    .attr("fill", "steelblue");