传入数据的d3版本4圆形包

// 引入D3.js库
<script src="https://d3js.org/d3.v4.min.js"></script>

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

// 示例数据
var data = {
    name: "Root",
    children: [
        { name: "Child1", size: 100 },
        { name: "Child2", size: 200, children: [
            { name: "Grandchild1", size: 50 },
            { name: "Grandchild2", size: 75 }
        ]}
    ]
};

// 创建圆形包布局
var pack = d3.pack()
    .size([800, 600])
    .padding(10);

// 生成节点
var root = d3.hierarchy(data)
    .sum(function(d) { return d.size; });

var nodes = pack(root).leaves();

// 绘制圆形
svg.selectAll("circle")
    .data(nodes)
    .enter().append("circle")
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .attr("r", function(d) { return d.r; })
    .style("fill", "steelblue");

// 添加文本标签
svg.selectAll("text")
    .data(nodes)
    .enter().append("text")
    .attr("x", function(d) { return d.x; })
    .attr("y", function(d) { return d.y; })
    .text(function(d) { return d.data.name; })
    .style("text-anchor", "middle")
    .style("dominant-baseline", "middle");