D3.js初体验 —— 线型图表与坐标轴的绘制

最新推荐文章于 2024-08-13 08:58:13 发布

AryaoO

最新推荐文章于 2024-08-13 08:58:13 发布

阅读量5.4k

点赞数

分类专栏：前端开发——D3 前端开发基础文章标签： d3 .append .attr scale axis

本文链接：https://blog.csdn.net/selina_chan/article/details/51144346

版权

本文介绍了使用D3.js库绘制线型图表和坐标轴的基本步骤，包括定义图表容器、生成数据曲线及添加坐标轴与文字。在实现过程中，应用了D3的scale函数，如线性函数，以及其他各种可用的scale类型。

摘要由CSDN通过智能技术生成

我们先来说一下利用D3来绘制线型图表与坐标轴的思路：

1、定义图表容器：container

2、定义一些数据来生成数据曲线

3、给图表添加坐标轴，包括文字

接下来就开始干活吧!

创建好HTML文件d3Test.html：

<pre style="font-family: 宋体; font-size: 9pt; background-color: rgb(255, 255, 255);"><pre name="code" class="html"><pre name="code" class="html"><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>D3 Test!</title>
    <link rel="stylesheet" href="style/d3Style.css" media="screen" type="text/css"/>
</head>
<body>
<div id="container"></div>
//注意：这里提供了两种导入d3.js文件的方法：①直接导入；②导入本地的d3.js文件
<!--<scriptsrc="htt