d3.js bubble

D3.js Bubble Chart 基础概念及应用

基础概念

D3.js（Data-Driven Documents）是一个JavaScript库，用于使用数据来操作文档。Bubble Chart（气泡图）是D3.js中一种常见的可视化图表类型，它通过气泡的大小、位置和颜色来表示数据的多个维度。

气泡大小：通常表示数据的某个数值属性。
气泡位置：在二维平面上表示另外两个数值属性。
气泡颜色：可以用来区分不同的数据类别或表示另一个数值属性。

优势

多维数据展示：能够同时展示多个维度的数据，使用户能够直观地理解数据之间的关系。
交互性：D3.js提供了丰富的交互功能，如鼠标悬停提示、缩放和拖拽等。
灵活性：可以根据具体需求自定义图表的样式和行为。

类型

简单气泡图：仅显示气泡的大小和位置。
彩色气泡图：通过颜色区分不同的数据组或类别。
动态气泡图：随着时间变化而更新气泡的位置和大小。

应用场景

数据对比：比较不同类别或时间点的数据。
趋势分析：展示数据随时间的变化趋势。
分布情况：观察数据的集中和分散程度。

示例代码

以下是一个简单的D3.js气泡图的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>D3.js Bubble Chart</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
        .bubble {
            fill: steelblue;
            opacity: 0.6;
        }
    </style>
</head>
<body>
<svg width="960" height="500"></svg>
<script>
    const data = [
        {name: "A", value: 30},
        {name: "B", value: 80},
        {name: "C", value: 45},
        // 更多数据...
    ];

    const svg = d3.select("svg");
    const maxRadius = d3.max(data, d => d.value);

    svg.selectAll(".bubble")
        .data(data)
        .enter()
        .append("circle")
        .attr("class", "bubble")
        .attr("cx", (d, i) => 50 + i * 100)
        .attr("cy", 250)
        .attr("r", d => Math.sqrt(d.value / Math.PI) * 10)
        .attr("title", d => `${d.name}: ${d.value}`);
</script>
</body>
</html>