d3.js的初步了解(01)

前言: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/[email protected]/dist/d3.js">script>

三、SVG—可缩放矢量模型

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

标签,画布。

1.1引入SVG

(1)在标签里面

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

(2)在body里面

  • 创建SVG
  • 设置修改SVG的脚本(使用D3)

(3)制作可视化方案,关于HTML的部分仅考虑SVG即可。

1.2一个画圆的小例子


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>d3.js——01title>
    <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中添加组标签,即
        .attr("transform", `translate(${
        100},${
        100})`);  //将这个组向下方和右方平移100个像素

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

你可能感兴趣的:(前端,d3.js,javascript,前端)