D3教程

最新推荐文章于 2024-05-03 18:08:38 发布

图拉呀

最新推荐文章于 2024-05-03 18:08:38 发布

阅读量1.3k

点赞数

文章标签：前端数据可视化 d3.js

本文链接：https://blog.csdn.net/u010328533/article/details/105979904

版权

1. 第一步，‘安装’D3

D3 是一个 JavaScript 函数库，并不需要npm那种安装，它只有一个文件，在 HTML 中引用即可。在d3官网可以下载所需文件。或者直接引入cdn链接。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
    <script >
        console.log(d3)
    </script>
</body>
</html>

引入成功，如图
在这里插入图片描述

2. 开始使用

    <script >
        console.log(d3)

        var svg = d3.select('#app') //选中画布容器，在里面添加内容
            .append('svg')
            .attr('width', 500)   //定义画布的宽度
            .attr('height',500)   //定义画布的高度
            .append('g')          //加入到一个相同的类

        var data  = [12,8 ,32,45,15,22,38,22,49]  //定义一组数据，即图表的数值
        //定义x轴映射关系
        var xScale = d3.scaleLinear()
            .domain([0,data.length - 1])
            .range([0,500])
        //定义y轴映射关系
        var yScale = d3.scaleLinear()
            .domain([0,d3.max(data)])
            .range([height,0])
        //定义面积生成函数
        var areaGenerate = d3.area()
            .x((d,i)=> xScale(i))
            .y0(height)
            .y1((d)=> yScale(d))
        //画线
        svg.append('g')
        .attr('d',areaGenerate(data))
        .style('fill','#00b388')

    </script>

图拉呀

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
D3教程

1. 第一步，‘安装’D3D3 是一个 JavaScript 函数库，并不需要npm那种安装，它只有一个文件，在 HTML 中引用即可。在d3官网可以下载所需文件。或者直接引入cdn链接。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca
复制链接

扫一扫