编辑“︁JavaScript D3.js基础”︁（章节）

= JavaScript D3.js基础 =

D3.js（Data-Driven Documents）是一个基于JavaScript的开源数据可视化库，它允许开发者通过数据绑定到文档对象模型（DOM）来创建动态、交互式的数据可视化图表。D3.js的核心思想是使用数据驱动文档的更新，从而生成复杂的可视化效果。

== 介绍 ==
D3.js由Mike Bostock开发，是目前最流行的数据可视化库之一。它结合了强大的数据操作能力和灵活的DOM操作功能，能够生成从简单的柱状图到复杂的网络图等各种可视化效果。D3.js的核心特性包括：
* '''数据绑定'''：将数据与DOM元素绑定，实现数据驱动的动态更新。
* '''可扩展性'''：支持自定义可视化组件和交互行为。
* '''高性能'''：利用现代浏览器的能力优化渲染性能。

D3.js适合初学者和高级用户，但需要一定的HTML、CSS和JavaScript基础。

== 安装与设置 ==
要使用D3.js，可以通过以下方式引入库文件：

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<head>
    <title>D3.js基础示例</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
    <!-- 可视化内容将在这里渲染 -->
</body>
</html>
</syntaxhighlight>

== 核心概念 ==

=== 选择集（Selections） ===
D3.js使用类似jQuery的选择器语法来操作DOM元素。通过<code>d3.select()</code>或<code>d3.selectAll()</code>方法选择元素，并对其进行操作。

<syntaxhighlight lang="javascript">
// 选择所有<p>元素并设置样式
d3.selectAll("p")
    .style("color", "blue")
    .attr("class", "highlight");
</syntaxhighlight>

=== 数据绑定（Data Binding） ===
D3.js的核心功能是将数据绑定到DOM元素。使用<code>.data()</code>方法将数据数组与选择集绑定。

<syntaxhighlight lang="javascript">
const data = [10, 20, 30, 40, 50];

// 绑定数据并创建新的元素
d3.select("body")
    .selectAll("div")
    .data(data)
    .enter()
    .append("div")
    .text(d => d);
</syntaxhighlight>

=== 比例尺（Scales） ===
比例尺用于将数据值映射到可视化空间（如像素）。D3.js提供了多种比例尺类型，如线性比例尺（<code>d3.scaleLinear()</code>）和序数比例尺（<code>d3.scaleOrdinal()</code>）。

<syntaxhighlight lang="javascript">
const scale = d3.scaleLinear()
    .domain([0, 100])  // 输入范围
    .range([0, 500]);  // 输出范围

console.log(scale(50)); // 输出：250
</syntaxhighlight>

== 实际案例：柱状图 ==
以下是一个简单的柱状图实现示例：

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<head>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
        .bar {
            fill: steelblue;
        }
    </style>
</head>
<body>
    <svg width="400" height="200"></svg>
    <script>
        const data = [30, 70, 110, 50, 90];
        const svg = d3.select("svg");

        const scale = d3.scaleLinear()
            .domain([0, d3.max(data)])
            .range([0, 300]);

        svg.selectAll("rect")
            .data(data)
            .enter()
            .append("rect")
            .attr("class", "bar")
            .attr("x", (d, i) => i * 60)
            .attr("y", d => 200 - scale(d))
            .attr("width", 50)
            .attr("height", d => scale(d));
    </script>
</body>
</html>
</syntaxhighlight>

输出效果：
* 5个蓝色矩形，高度分别对应数据值。
* 矩形从左到右排列，高度从底部向上延伸。

=== 交互性 ===
D3.js支持添加交互行为，例如鼠标悬停效果：

<syntaxhighlight lang="javascript">
d3.selectAll("rect")
    .on("mouseover", function() {
        d3.select(this).attr("fill", "orange");
    })
    .on("mouseout", function() {
        d3.select(this).attr("fill", "steelblue");
    });
</syntaxhighlight>

== 进阶主题 ==
* '''过渡（Transitions）'''：使用<code>.transition()</code>实现平滑动画效果。
* '''力导向图（Force Layout）'''：用于可视化网络关系。
* '''地理映射（Geographic Projections）'''：绘制地图和地理数据。

== 总结 ==
D3.js是一个功能强大的数据可视化工具，适合从初学者到高级开发者的所有用户。通过数据绑定和DOM操作，可以创建高度定制化的可视化效果。掌握D3.js需要时间和实践，但其灵活性和表现力使其成为数据可视化领域的首选工具之一。

== 参见 ==
* [[JavaScript数据可视化]]
* [[SVG基础]]
* [[Canvas API]]

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript数据可视化]]