【创作活动】D3.js：自定义数据可视化的终极指南

热爱分享的博士僧

于 2024-09-17 08:40:34 发布

阅读量653

点赞数 4

文章标签：信息可视化 javascript 开发语言

本文链接：https://blog.csdn.net/2403_86762465/article/details/142310667

版权

D3.js（Data-Driven Documents）是一个非常强大的JavaScript库，用于在Web浏览器中创建动态的、交互式的图形和数据可视化。D3.js的核心理念是使用数据来驱动文档的改变，从而实现数据的可视化。与其他一些专注于图表类型的库不同，D3.js提供了底层的工具，让开发者可以完全控制可视化的过程，从数据处理到最终的图形输出。

D3.js的主要功能

数据绑定：D3.js使用数据绑定机制，将数据与DOM元素关联起来，实现数据驱动的文档操作。
SVG支持：利用SVG（可缩放矢量图形）来绘制图形，支持矢量图形的缩放和高分辨率打印。
CSS支持：支持CSS样式，可以轻松地为图形添加样式。
动画效果：提供动画功能，可以创建平滑的过渡效果。
高度可定制：由于提供了底层的工具，开发者可以完全控制可视化的每一个细节。
交互性强：支持多种交互方式，如点击、拖动、缩放等。
跨平台兼容：在现代浏览器中运行良好，支持各种设备，包括桌面和移动设备。

使用示例

假设你是一名前端开发者，需要为公司的网站创建一个动态的折线图，展示过去一年每个月的销售额。

数据准备

数据获取：从后端API获取销售数据，或者从现有的数据存储中提取数据。
数据处理：将获取到的数据格式化为D3.js可识别的格式。

数据可视化

初始化图表：在HTML页面中创建一个<svg>容器，并通过JavaScript初始化D3.js实例。
配置图表：设置图表的基本配置项，包括标题、图例、坐标轴等。
数据绑定：将销售数据绑定到图表中。
交互配置：配置图表的交互功能，例如点击事件、缩放功能等。

示例代码

html

深色版本

1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>D3.js示例</title>
6<script src="https://d3js.org/d3.v6.min.js"></script>
7<style>
8  .axis path,
9  .axis line {
10    fill: none;
11    stroke: black;
12    shape-rendering: crispEdges;
13  }
14
15  .line {
16    fill: none;
17    stroke: steelblue;
18    stroke-width: 2px;
19  }
20</style>
21</head>
22<body>
23<svg width="960" height="500"></svg>
24<script>
25const svg = d3.select("svg"),
26      margin = {top: 20, right: 20, bottom: 30, left: 50},
27      width = +svg.attr("width") - margin.left - margin.right,
28      height = +svg.attr("height") - margin.top - margin.bottom;
29
30// 设置缩放范围
31const x = d3.scaleLinear().range([0, width]),
32      y = d3.scaleLinear().range([height, 0]);
33
34// 创建SVG的g元素，并应用margin
35const g = svg.append("g")
36    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
37
38// 加载数据
39d3.json("sales_data.json").then(function(data) {
40  // 数据处理
41  data.forEach(d => {
42    d.date = new Date(d.date);
43    d.sales = +d.sales;
44  });
45
46  // 设置x和y轴的域
47  x.domain(d3.extent(data, function(d) { return d.date; })).nice();
48  y.domain(d3.extent(data, function(d) { return d.sales; })).nice();
49
50  // 添加x轴
51  g.append("g")
52      .attr("transform", "translate(0," + height + ")")
53      .call(d3.axisBottom(x));
54
55  // 添加y轴
56  g.append("g")
57      .call(d3.axisLeft(y).ticks(10, "%"));
58
59  // 创建折线
60  const valueline = d3.line()
61      .x(function(d) { return x(d.date); })
62      .y(function(d) { return y(d.sales); });
63
64  // 添加折线
65  g.append("path")
66      .datum(data)
67      .attr("class", "line")
68      .attr("d", valueline);
69
70  // 添加点
71  g.selectAll(".dot")
72      .data(data)
73      .enter().append("circle")
74      .attr("class", "dot")
75      .attr("cx", function(d) { return x(d.date); })
76      .attr("cy", function(d) { return y(d.sales); })
77      .attr("r", 5);
78});
79
80// 数据文件示例（实际应用中应从服务器获取）
81const sales_data_json = `
82[
83  {"date":"2023-01-01","sales":200},
84  {"date":"2023-02-01","sales":250},
85  {"date":"2023-03-01","sales":300},
86  {"date":"2023-04-01","sales":350},
87  {"date":"2023-05-01","sales":400},
88  {"date":"2023-06-01","sales":450},
89  {"date":"2023-07-01","sales":500},
90  {"date":"2023-08-01","sales":550},
91  {"date":"2023-09-01","sales":600},
92  {"date":"2023-10-01","sales":650},
93  {"date":"2023-11-01","sales":700},
94  {"date":"2023-12-01","sales":750}
95]`;
96
97// 模拟数据加载
98setTimeout(() => {
99  document.querySelector("script:last-child").textContent = sales_data_json;
100}, 0);
101</script>
102</body>
103</html>