d3.js demo实例

以下是一个简单的d3.js示例，用于创建一个基本的柱状图：

一、基础概念

数据驱动文档（Data - Driven Documents）
- d3.js是一个JavaScript库，它允许将数据绑定到DOM（文档对象模型）元素上，并根据数据对DOM进行操作。这使得可以创建高度交互式和动态的数据可视化效果。

选择集（Selections）
- 用于选择要操作的DOM元素。可以通过标签名、类名、ID等方式进行选择。

二、优势

灵活性高
- 可以创建各种各样的可视化，从简单的图表到复杂的交互式图形。

数据绑定强大
- 能够轻松地将数据与DOM元素关联，方便数据的更新和可视化的动态变化。

三、类型（这里简单提及常见的可视化类型示例）

柱状图
- 如下面的示例所示，用于比较不同类别的数据量。

折线图
- 适合展示数据随时间或其他连续变量的变化趋势。

四、应用场景

数据分析报告
- 快速直观地展示数据中的关键信息。

仪表盘
- 构建实时监控数据的界面。

五、示例代码（创建柱状图）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device-width, initial - scale = 1.0">
    <title>d3.js柱状图示例</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
        .bar {
            fill: steelblue;
        }
    </style>
</head>

<body>
    <svg width="600" height="400"></svg>
    <script>
        // 数据
        const data = [10, 20, 30, 40, 50];
        const svg = d3.select('svg');
        const margin = { top: 20, right: 20, bottom: 30, left: 40 };
        const width = +svg.attr('width') - margin.left - margin.right;
        const height = +svg.attr('height') - margin.top - margin.bottom;

        const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`);

        // 比例尺
        const x = d3.scaleBand().rangeRound([0, width]).padding(0.1);
        const y = d3.scaleLinear().rangeRound([height, 0]);

        x.domain(data.map((d, i) => i));
        y.domain([0, d3.max(data)]);

        // 绘制柱状图
        g.selectAll('.bar')
            .data(data)
            .enter().append('rect')
            .attr('class', 'bar')
            .attr('x', (d, i) => x(i))
            .attr('y', d => y(d))
            .attr('width', x.bandwidth())
            .attr('height', d => height - y(d));


        // 添加x轴
        g.append('g')
            .attr('transform', `translate(0,${height})`)
            .call(d3.axisBottom(x).tickFormat(i => i + 1));


        // 添加y轴
        g.append('g')
            .call(d3.axisLeft(y));
    </script>
</body>

</html>

如果在开发过程中遇到问题：

一、常见问题及原因