前端使用d3.js来绘制图表

上篇文章写了用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

  
  
  
    
  D3.js 柱状图示例  
  
  
    
  

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 的数据驱动文档模型使得这个过程变得相对简单，你只需要重新绑定数据并调用相应的更新函数就可以了。

四：完整示例

  
  
  
    
  D3Demo  
    
    /* 样式设置 */  
    #chart {  
      width: 600px;  
      height: 400px;  
      border: 1px solid #ccc;  
    }  
    .line {  
      stroke: #000;  
      stroke-width: 2px;  
    }  
    .label {  
      fill: #666;  
      font-size: 12px;  
    }  
    
  
  
  
  
    
    
    // 定义数据和比例尺  
    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 轴刻度（可选）
}