d3.js的初步了解（01）

最新推荐文章于 2024-06-19 23:13:40 发布

Sandy_Star

最新推荐文章于 2024-06-19 23:13:40 发布

阅读量587

点赞数

分类专栏：前端文章标签： d3.js javascript 前端

本文链接：https://blog.csdn.net/weixin_48931875/article/details/113099491

版权

前端专栏收录该内容

53 篇文章 6 订阅

订阅专栏

前言：d3.js的学习正式开启，对它的了解很少。不管怎样，还是坚持学下来吧！这篇博客主要是D3.jd的一个介绍和创建。会用到有关网页开发的内容。

一、d3.js的简单介绍

d3.js是一个数据可视化的库，技术基础是SVG。（本质上还是js的一个使用）。

二、导入d3.js

1、直接通过互联网链接导入

<script src="http://d3js.org/d3.v5.min.js"></script>

2、通过本地服务器链接（推荐）

本地路径这里只是个示例，具体路径害得根据跟个人来写

<script src="/static/js/d3.min.js"></script>

3、通过unpkg链接

<script src="https://unpkg.com/browse/d3@5.15.0/dist/d3.js"></script>

三、SVG—可缩放矢量模型

SVG是D3.js主要操作的对象。SVG作为矢量图，不会随着图片的缩放而发生失真。

<svg></svg>标签，画布。

1.1引入SVG

(1）在标签里面

设置标题
通过script标签导入d3.js库

(2)在body里面

创建SVG
设置修改SVG的脚本（使用D3）

（3）制作可视化方案，关于HTML的部分仅考虑SVG即可。

1.2一个画圆的小例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>d3.js——01</title>
    <script src='https://d3js.org/d3.v5.min.js'></script>
</head>
<body>
    <svg width='960' height='500' id="mainsvg" class="svgs"></svg>
    <script>
        //在HTML中查找并获取SVG
        let mainsvg = d3.select('.svgs');
        
        let maingroup = mainsvg
        .append("g")    //在svg中添加组标签，即<g>
        .attr("transform", `translate(${100},${100})`);  //将这个组向下方和右方平移100个像素

        let circle = maingroup
        .append('circle')      //在主要组中加入一个圆
        .attr('stroke','red')  //圆的边框为红色
        .attr('r' ,'66')       //圆的半径为66像素
        .attr('fill','green'); //圆的填充颜色为绿色
    </script>
</body>
</html>

Sandy_Star

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
d3.js的初步了解（01）

前言：d3.js的学习正式开启，对它的了解很少。不管怎样，还是坚持学下来吧！这篇博客主要是D3.jd的一个介绍和创建。会用到有关网页开发的内容。一、d3.js的简单介绍d3.js是一个数据可视化的库，技术基础是SVG。（本质上还是js的一个使用）。二、导入d3.js1、直接通过互联网链接导入<script src="http://d3js.org/d3.v5.min.js"></script>2、通过本地服务器链接（推荐）本地路径这里只是个示例，具体路径害得根据跟.
复制链接

扫一扫

专栏目录