D3.js从圆圈到三角形的可视化

// 创建一个SVG元素
var svg = d3.select("body").append("svg")
    .attr("width", 500)
    .attr("height", 500);

// 创建一个数据集
var data = [
    {x: 100, y: 100, r: 50, shape: "circle"},
    {x: 300, y: 300, r: 50, shape: "triangle"}
];

// 将数据绑定到SVG元素上
var circles = svg.selectAll("circle")
    .data(data.filter(function(d) { return d.shape === "circle"; }));
var triangles = svg.selectAll("path")
    .data(data.filter(function(d) { return d.shape === "triangle"; }));

// 创建圆圈
circles.enter().append("circle")
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .attr("r", function(d) { return d.r; });

// 创建三角形
triangles.enter().append("path")
    .attr("d", function(d) {
        var x = d.x, y = d.y, r = d.r;
        return "M" + x + " " + (y - r) +
               "L" + (x + r) + " " + (y + r) +
               "L" + (x - r) + " " + (y + r) + "Z";
    });