D3.js的v5版本入门教程（第六章）——做一个简单的图表

最新推荐文章于 2021-06-09 17:24:48 发布

数星星等天明

最新推荐文章于 2021-06-09 17:24:48 发布

阅读量1.5w

点赞数 4

分类专栏： D3.js的v5版本入门教程文章标签： d3.js v5 v4

本文链接：https://blog.csdn.net/qq_34414916/article/details/80029352

版权

本文是D3.js v5版本的入门教程第六章，讲解如何制作简单图表。首先介绍svg画布、rect元素和g元素等基础知识，然后通过数据准备、创建svg画布和分组、绘制矩形的步骤详细阐述了绘制过程。文章还提供了效果预览和源码浏览，并推荐了一个结合neo4j图数据库的可视化项目作为进阶学习。

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

D3.js的v5版本入门教程（第六章）

从这一章开始，进入正式的d3,js绘图阶段，有了前面几章基本知识的积累，这样看接下来的绘图代码才不会觉得比较辛苦

做一个简单的图表

为了做一个简单的图表，我们还是需要以下新的知识点

有了这些知识后，我们开始绘制

1、数据准备

var marge = {top:60,bottom:60,left:60,right:60}//设置边距
var dataset = [ 250 , 210 , 170 , 130 , 90 ];  //数据（表示矩形的宽度）

2、得到svg画布，并创建分组

var svg = d3.select("svg");//得到svg画布

关注

专栏目录