如何利用D3.js绘制一个简单的散点图

最新推荐文章于 2024-08-16 23:07:31 发布

y1512803764

最新推荐文章于 2024-08-16 23:07:31 发布

阅读量4k

点赞数 1

分类专栏： d3学习 JS基础文章标签： d3 d3.js

本文链接：https://blog.csdn.net/y1512803764/article/details/78113240

版权

本文指导如何利用D3.js库在网页上创建SVG画布，并通过定义点集和绘制圆点来实现散点图的绘制。介绍了D3.js中append()和attr()方法的使用，以及如何通过匿名函数设定点的坐标。

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

首先保证你的包中引入了d3.js文件，我这里用的是d3.v3.js这个版本
接下来可以开始写你的程序了

要在网页上绘制散点图，我们需要用到SVG(不清楚SVG概念的请点击这里学习)

1.定义画布

//这里我们随意定义一些散点坐标
var dataset = [[5,10],[10,8],[15,18],[20,11],[25,15],[30,20]];
//设定画布宽度
var width = 1500;
//画布高度
var height = 700;
//设置画布
var svg = d3.select("body")
            .append("svg")
            .attr("width",width)
            .attr("height",height);

以上，我们的画布就定义完成了（关于