利用D3.js实现数据可视化的简单示例

最新推荐文章于 2025-03-16 17:38:08 发布

夜月还山岚

最新推荐文章于 2025-03-16 17:38:08 发布

阅读量2k

点赞数 25

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

本文链接：https://blog.csdn.net/jxnd123456/article/details/143980492

版权

2.然后获取数据（这里定义了销售数据数组作为数据）。

3.接着创建一个 svg 元素作为画布

4.定义 x 轴和 y 轴的比例尺，x 轴使用 scaleBand 比例尺来处理离散的月份数据，y 轴使用 scaleLinear 比例尺根据销售金额的范围来确定坐标范围

5.分别添加 x 轴和 y 轴到 svg 画布上。

6.定义折线生成器

7.使用数据绘制折线和数据点

8.监听事件并添加处理函数

使用D3.js过程中，我们一般需要创建画布、绑定数据、选择元素、操作元素、监听元素事件等，因此，需要先了解D3.js的选择器、数据绑定方式、DOM操作方法、事件监听等。

一、D3.js选择器

1. d3.select() ：.

- 选择第一个匹配的 DOM 元素。

- 用法：`d3.select(selector)`，其中 `selector` 是 CSS 选择器字符串。

2. d3.selectAll() ：

- 选择所有匹配的 DOM 元素。

- 用法：`d3.selectAll(selector)`，其中 `selector` 是 CSS 选择器字符串。

二、数据绑定相关方法

1.enter() ：

- 为数据绑定过程中未匹配的元素创建新的 DOM 元素。

- 用法：`selection.enter()`。

2.exit() ：

- 为数据绑定过程中多余的元素（即数据减少时）提供操作。

- 用法：`selection.exit()`。

3.data() ：

- 将数据绑定到 DOM 元素上。

- 用法：`selection.data(data)`，其中 `data` 是要绑定的数据。

三、DOM操作方法

1.attr() ：

- 获取或设置 DOM 元素的属性。

- 用法：`selection.attr(name, value)`。

2.style() ：

- 获取或设置 DOM 元素的样式。

- 用法：`selection.style(name, value)`。

3.text() ：

- 获取或设置 DOM 元素的文本内容。

- 用法：`selection.text(value)`。

4.html() ：

- 获取或设置 DOM 元素的 HTML 内容。

- 用法：`selection.html(value)`。

5.append() ：

- 在选定的元素中添加新的子元素。

- 用法：`selection.append(name)`，其中 `name` 是新元素的标签名。

6.remove() ：

- 移除选定的元素。

- 用法：`selection.remove()`。

四、事件监听

1.on() ：

- 为 DOM 元素添加事件监听器。

- 用法：`selection.on(eventName, listener)`。

五、实现折线图案例

DOCTYPE html><html lang="en">
<head>
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>D3.js实现折线图案例title>
  <style>
    svg {
      width: 600px;
      height: 400px;
      border: 1px solid #ccc;
    }
  style>
head>
<body>
  <script src="https://d3js.org/d3.v7.min.js">script>  <script>
    // 销售数据
    const salesData = [      { month: 'Jan', amount: 12000 },      { month: 'Feb', amount: 15000 },      { month: 'Mar', amount: 18000 },      { month: 'Apr', amount: 16000 },      { month: 'May', amount: 20000 },      { month: 'Jun', amount: 22000 }    ];
    // 定义 svg 画布
    const svg = d3.select('body').append('svg');
    // 定义 x 轴比例尺
    const xScale = d3.scaleBand()
     .domain(salesData.map(d => d.month))
     .range([0, 500])
     .padding(0.2);
    // 定义 y 轴比例尺
    const yScale = d3.scaleLinear()
     .domain([0, d3.max(salesData, d => d.amount)])
     .range([300, 0]);
    // 添加 x 轴
    svg.append('g')
     .attr('transform', 'translate(50,300)')
     .ca