d3.js为节点设置样式

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

// 创建数据数组
const data = [
    {x: 100, y: 100, r: 20, color: "red"},
    {x: 200, y: 200, r: 30, color: "blue"},
    {x: 300, y: 100, r: 40, color: "green"}
];

// 绑定数据并创建圆节点
svg.selectAll("circle")
    .data(data)
    .enter().append("circle")
    // 设置圆的位置、半径和颜色
    .attr("cx", d => d.x)
    .attr("cy", d => d.y)
    .attr("r", d => d.r)
    .style("fill", d => d.color);

// 添加鼠标悬停效果
svg.selectAll("circle")
    .on("mouseover", function(event, d) {
        d3.select(this).transition()
            .duration(200)
            .attr("r", d.r * 1.5);
    })
    .on("mouseout", function(event, d) {
        d3.select(this).transition()
            .duration(200)
            .attr("r", d.r);
    });