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

07-19 1139阅读

上篇文章写了用three.js来实现显示三维河床的绘制。那么平面图形或者自定义的图表怎么绘制更简单呢?echart比较容易上手,但是项目中有些特殊功能想自定义,最后还是选择了d3.js,虽然上手稍微难点。话不多说,记录分享一下使用和调用流程。

前端使用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 轴刻度(可选) }
VPS购买请点击我

文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。

目录[+]