我的D3.js学习之路1——用SVG 对象的控制写一个简单的静态网页可视化图

本文链接：https://blog.csdn.net/weixin_60619560/article/details/140443087

html代码

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>gym</title>
  <link rel="stylesheet" href="css/index.css">
  <!-- 引入 D3.js 库 -->
  <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
<header>
  <h1>欢迎来到我的健身房</h1>
</header>
<nav>
  <ul>
    <li><a href="#section1">部分 1</a></li>
    <li><a href="#section2">部分 2</a></li>
  </ul>
</nav>
<main>
  <section id="section1">
    <h2>1</h2>
    <p>这是第一部分的内容。</p>
    <div id="chart-container"></div> <!-- 用于放置图表的容器 -->
  </section>
  <section id="section2">
    <h2>2</h2>
    <p>这是第二部分的内容。</p>
  </section>
</main>
<footer>
  <p>这是页脚</p>
</footer>

<!-- 引入 JavaScript 文件 -->
<script src="js/chart.js"></script>

</body>
</html>

css代码

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    width: 80%;
    margin: 0 auto;
}

header {
    background: #333;
    color: #fff;
    padding: 20px 0;
}

header h1 {
    margin: 0;
    text-align: center;
}

nav ul {
    list-style: none;
    padding: 0;
    text-align: center;
}

nav ul li {
    display: inline;
    margin: 0 10px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

.hero {
    background: url('https://via.placeholder.com/1200x600') no-repeat center center/cover;
    color: #fff;
    text-align: center;
    padding: 100px 0;
}

.hero h2 {
    margin: 0;
    font-size: 2.5em;
}

.hero p {
    font-size: 1.2em;
}

.hero .btn {
    background: #ff6347;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
}

section {
    padding: 50px 0;
}

section h2 {
    text-align: center;
    margin-bottom: 20px;
}

section p, section ul {
    text-align: center;
    margin: 0 auto;
    width: 60%;
}

footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
}

js代码

const data = [10, 20, 30, 40, 50];

//创建SVG元素
const svg = d3.select('#chart-container')
  .append('svg')
  .attr('width', '100%')
  .attr('height', 300)
  .attr('viewBox', '0 0 400 300') // 可视区域设置，根据实际需要调整
  .attr('preserveAspectRatio', 'xMidYMid');

//创建柱状图
svg.selectAll('rect')
  .data(data)
  .enter()
  .append('rect')
  .attr('x', (d, i) => i * 70)
  .attr('y', d => 300 - d * 5)
  .attr('width', 60)
  .attr('height', d => d * 5)
  .attr('fill', 'teal');

//添加文本标签
svg.selectAll('text')
  .data(data)
  .enter()
  .append('text')
  .text(d => d)
  .attr('x', (d, i) => i * 70 + 30)
  .attr('y', d => 300 - d * 5 + 20)
  .attr('text-anchor', 'middle')
  .attr('fill', 'white');

这段代码是使用 D3.js 库创建一个简单的柱状图，并将其渲染到一个 SVG 元素中。让我们逐步解释每一部分代码的作用：

1、数据定义

const data = [10, 20, 30, 40, 50];

这里定义了一个简单的数据数组，包含了五个数值，分别表示柱状图中每个柱子的高度。

2、创建SVG元素

const svg = d3.select('#chart-container')
  .append('svg')
  .attr('width', '100%')
  .attr('height', 300)
  .attr('viewBox', '0 0 400 300') 
  .attr('preserveAspectRatio', 'xMidYMid');

使用 D3.js 选择器选中id为chart-container的 HTML 元素，赋给一个名为'svg'的SVG元素
通过append在选中的chart-container元素内部追加一个 SVG 元素
.attr('width', '100%') 和 .attr('height', 300)设置SVG的宽度为父容器的 100%，高度为 300 像素
.attr('viewBox', '0 0 400 300')设置SVG的可视区域，宽度 400 像素，高度 300 像素。
.attr('preserveAspectRatio', 'xMidYMid')，preserveAspectRatio属性是用来控制 SVG 元素如何在其视窗中放置和缩放图形内容的，xMidYMid是preserveAspectRatio的值，表示在 SVG 容器中居中对齐

3、创建柱状图

svg.selectAll('rect')
  .data(data)
  .enter()
  .append('rect')
  .attr('x', (d, i) => i * 70)
  .attr('y', d => 300 - d * 5)
  .attr('width', 60)
  .attr('height', d => d * 5)
  .attr('fill', 'teal');

svg.selectAll('rect')选择 SVG 中所有的 rect 元素（柱子）
.data(data)将数据绑定到选中的 rect 元素上
.enter()进入数据集，处理绑定但尚未被创建的数据元素。 .append('rect')：为每个数据元素创建一个 rect 元素
.attr('x', (d, i) => i * 70)设置每个柱子的 x 坐标，根据索引位置乘以 70，以便水平排列
.attr('y', d => 300 - d * 5)
设置每个柱子的 y 坐标，使其从底部开始，高度为 300 - 数据值 * 5
.attr('width', 60)设置每个柱子的宽度为固定值 60
.attr('height', d => d * 5)根据数据值设置每个柱子的高度，乘以 5 像素的比例因子
.attr('fill', 'teal')设置柱子的填充颜色为 teal

4、添加文本标签

svg.selectAll('text')
  .data(data)
  .enter()
  .append('text')
  .text(d => d)
  .attr('x', (d, i) => i * 70 + 30)
  .attr('y', d => 300 - d * 5 + 20)
  .attr('text-anchor', 'middle')
  .attr('fill', 'white');