上篇文章写了用three.js来实现显示三维河床的绘制。那么平面图形或者自定义的图表怎么绘制更简单呢？echart比较容易上手，但是项目中有些特殊功能想自定义，最后还是选择了d3.js，虽然上手稍微难点。话不多说，记录分享一下使用和调用流程。
一：D3.js 简介
D3.js 是一个用于创建数据驱动的文档的 JavaScript 库。它提供了一组易于使用的 API，可以帮助开发者快速创建各种类型的图表和可视化效果。D3.js 的主要特点是使用数据驱动的文档，这意味着您可以使用任何格式的数据来创建可视化效果，包括 CSV、JSON、XML 等，你可以通过自定义 HTML、CSS 和 JavaScript 来实现复杂的图形和交互效果。
当然ECharts 也不错选择哪种工具取决于具体的需求和项目。如果需要更多的定制性和灵活性，可以选择 D3.js；如果需要快速实现美观、交互式的图表，可以选择 ECharts
二：安装 D3.js
要在项目中安装 D3.js，可以使用 npm 或直接从官网下载
npm install d3
或者
直接引用：https://d3js.org/d3.v7.min.js
三：创建基本图表
1.创建 HTML 文件并引入 D3.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3.js 柱状图示例</title>
</head>
<body>
<script src="https://d3js.org/d3.v7.min.js"></script>
</body>
</html>
2.创建 JavaScript 文件并编写代码：
// 定义数据
var data = [5, 20, 35, 10, 50];
// 创建 SVG 容器并设置宽度和高度
var svg = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 500);
// 创建柱状图并设置颜色和位置
var bars = svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", function(d, i) { return i * 100; })
.attr("y", function(d) { return 500 - d; })
.attr("width", function(d) { return d; })
.attr("height", function(d) { return d; })
.attr("fill", "steelblue");
3.添加样式和交互效果
// 添加鼠标悬停效果
svg.selectAll("rect")
.on("mouseover", function(d) {
d3.select(this).attr("fill", "red"); // 将柱状图颜色更改为红色
})
.on("mouseout", function(d) {
d3.select(this).attr("fill", "steelblue"); // 将柱状图颜色恢复为原始颜色（steelblue）
});
三：d3处理数据驱动的文档步骤总结
1.获取和准备数据：首先，你需要获取你想要可视化的数据。这可以是从服务器获取的 JSON、CSV 或 XML 数据，也可以是存储在本地文件中的数据。然后，你需要将这些数据转化为适合 D3.js 使用的格式。
2.选择或创建 DOM 元素：D3.js 需要有一个 DOM（文档对象模型）元素来附加数据。你可以使用 d3.select 或 d3.selectAll 来选择现有的 DOM 元素，或者使用 d3.create 来创建新的元素。
3.绑定数据：使用 data() 方法将数据绑定到你选择的 DOM 元素上。这个方法返回一个特殊的 D3 selection，其中的每个元素都与数据集中的一个元素相关联。
4.创建和更新 DOM：根据数据的数量和类型，你可能需要创建新的 DOM 元素（例如，当数据中有新的项目时），或者更新现有元素的属性（例如，改变它们的颜色或位置）。D3.js 提供了一系列方法来创建和更新 DOM，例如 enter()、update() 和 exit()。
5.添加交互：D3.js 还允许你添加各种交互效果，如鼠标悬停、点击等。你可以使用事件处理程序来实现这些交互。
6.更新数据：当数据改变时，你需要重新绑定数据并更新 DOM。D3.js 的数据驱动文档模型使得这个过程变得相对简单，你只需要重新绑定数据并调用相应的更新函数就可以了。
四：完整示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3Demo</title>
<style>
/* 样式设置 */
#chart {
width: 600px;
height: 400px;
border: 1px solid #ccc;
}
.line {
stroke: #000;
stroke-width: 2px;
}
.label {
fill: #666;
font-size: 12px;
}
</style>
</head>
<body>
<div id="chart"></div>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script>
// 定义数据和比例尺
var data = [5, 20, 35, 10, 50]; // 数据数组
var xScale = d3.scaleLinear().domain([0, data.length - 1]).range([0, 600]); // X 轴比例尺
var yScale = d3.scaleLinear().domain([0, d3.max(data)]).range([400, 0]); // Y 轴比例尺
var svg = d3.select("#chart") // 选择图表容器
.append("svg") // 添加 SVG 容器
.attr("width", "100%") // 设置容器宽度为自适应
.attr("height", "100%"); // 设置容器高度为自适应
// 绘制渐变色圆形
var gradient = svg.append("defs") // 添加渐变定义容器
.append("radialGradient") // 添加径向渐变
.attr("id", "gradient") // 设置渐变 ID
.attr("cx", "50%") // 设置渐变中心点位置（X坐标）
.attr("cy", "50%") // 设置渐变中心点位置（Y坐标）
.attr("fx", "50%") // 设置焦点位置（X坐标）
.attr("fy", "50%") // 设置焦点位置（Y坐标）
.attr("r", "50%") // 设置渐变半径（百分比）
.append("stop") // 添加渐变停止点
.attr("offset", "0%") // 设置停止点偏移量（百分比）
.attr("stop-color", "#ff9999") // 设置停止点颜色（RGB 值）
.append("stop") // 添加渐变停止点
.attr("offset", "100%") // 设置停止点偏移量（百分比）
.attr("stop-color", "#99ff99"); // 设置停止点颜色（RGB 值）
var circle = svg.append("circle") // 添加圆形元素
.attr("cx", xScale(2)) // 设置圆形中心点 X 坐标（使用比例尺计算）
.attr("cy", yScale(25)) // 设置圆形中心点 Y 坐标（使用比例尺计算）
.attr("r", function() { return Math.sqrt(yScale(25) * Math.sqrt(yScale(25))); }) // 设置圆形半径（根据 Y 坐标计算）
.style("fill", "url(#gradient)"); // 设置圆形填充色为渐变色（使用渐变 ID）
// 绘制折线图和标签
var line = svg.append("path") // 添加折线元素
.attr("class", "line") // 设置折线元素类名（用于样式设置）
.attr("d", function() { // 设置折线路径数据（使用比例尺计算）
var lineData = data.map(function(d, i) { return [xScale(i), yScale(d)]; });
return d3.line()([lineData[0], lineData[lineData.length - 1]])(lineData);
});
var labels = svg.selectAll(".label") // 选择所有标签元素并分组为选择集对象
.data(data) // 将数据绑定到标签元素上，每个数据项对应一个标签元素
.enter() // 进入更新操作
.append("text") // 添加文本元素
.attr("class", "label") // 设置文本元素类名（用于样式设置）
.attr("x", function(d, i) { return xScale(i); }) // 设置文本元素 X 坐标（使用比例尺计算）
.attr("y", function(d) { return yScale(d) - 5; }) // 设置文本元素 Y 坐标（使用比例尺计算）
.text(function(d) { return d; }) // 设置文本内容为数据值
.call(d3.axisRight(yScale)); // 添加 Y 轴刻度（可选）
}
</script>
</body>
</html>