寻求无需CSV文件的D3 JS基础HelloWorld气泡图可用示例

下面是一个完全基于本地JavaScript数据的极简气泡图示例，不需要依赖外部CSV文件：

<!DOCTYPE html>
<html>
<head>
    <title>D3 Hello World 气泡图</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
    <svg id="bubble-chart" width="400" height="400"></svg>

    <script>
        // 本地数据源，直接定义在JS中
        const data = [
            { name: "A", value: 30 },
            { name: "B", value: 60 },
            { name: "C", value: 20 },
            { name: "D", value: 80 },
            { name: "E", value: 45 }
        ];

        // 获取SVG容器
        const svg = d3.select("#bubble-chart");
        const width = +svg.attr("width");
        const height = +svg.attr("height");

        // 创建气泡布局
        const bubble = d3.pack()
            .size([width, height])
            .padding(10);

        // 转换数据为层级结构（d3.pack需要层级数据）
        const root = d3.hierarchy({ children: data })
            .sum(d => d.value);

        // 生成气泡数据
        const nodes = bubble(root).descendants().filter(d => !d.children);

        // 绘制气泡
        svg.selectAll("circle")
            .data(nodes)
            .enter()
            .append("circle")
            .attr("cx", d => d.x)
            .attr("cy", d => d.y)
            .attr("r", d => d.r)
            .style("fill", "#69b3a2")
            .style("opacity", 0.7);

        // 添加气泡标签
        svg.selectAll("text")
            .data(nodes)
            .enter()
            .append("text")
            .attr("x", d => d.x)
            .attr("y", d => d.y + 5)
            .style("text-anchor", "middle")
            .style("font-size", "12px")
            .text(d => d.data.name);
    </script>
</body>
</html>

关键说明 #

• 直接使用本地数组data作为数据源，完全替代CSV文件的依赖
• 使用d3.hierarchy将扁平化数据转换为d3.pack需要的层级结构
• d3.pack()负责计算每个气泡的位置和半径
• 代码保留了最核心的气泡绘制逻辑，属于HelloWorld级别的极简实现

内容的提问来源于stack exchange，提问作者Michael Cropper