首页 > 其他分享 >可视化库D3.js

可视化库D3.js

时间:2023-05-28 14:33:27浏览次数:60  
标签:网页 SVG js 文档 可视化 D3

什么是D3.js

D3指的是Data-Driven DocumentsjsJavascript,是后缀名。先看看官网上对D3.js库的定义:

D3.js 是基于数据驱动文档工作方式的一款JavaScript函数库,主要用于网页作图、生成互动图形,是最流行的可视化库之一。D3使你有能力借助HTML,SVG和CSS来生动地可视化各种数据**

D3不需要你使用某个特定的框架,它的重点在于对现代主流浏览器的兼容,同时结合了强大的可视化组件,以数据驱动的方式去操作DOM

通过上述的表达,总结D3.js库的几大特点:

一款基于JavaScript的函数库
借助HTML、SVG和CSS等实现可视化
组件强大,通过数据驱动的方式来操作DOM

 

安装

下载最新的版本V5.16.0。解压后,在HTML文件中包含相关的js文件即可


[D3.js]https://github.com/d3/d3/releases/download/v5.16.0/d3.zip

 

通过采用


注意:现在已经是V5版本。V5和V3的很多语法还是有区别的,后期所有的文档都是基于V5.

 

预备知识

如果想通过D3来实现数据的可视化,需要的预备知识:

HTML:超文本标记语言,用于设定网页的内容
CSS:层叠样式表,用于设定网页的样式
JavaScript:流行的前端语言,用于设定网页的行为
DOM:文档对象模型,用于修改文档的内容和结果
SVG:可缩放矢量图形,用于绘制可视化的图形
以上知识点没有必要掌握的非常精通,建议到W3school快速入门,了解基本概念,再看几个案例demo,以后遇到不懂的地方可以进行查看。

编程环境


D3.js是在网页上的可视化制图,常用的网页制作工具:

IDE的选择:VS code、Sublime Text、Notepad++等,推荐使用VS code

浏览器:D3支持的主流浏览器不包括IE8及以前的版本。D3测试了Firefox、Chrome、Safari、Opera和IE9。D3的大部分组件可以在旧的浏览器运行。

Chrome是最好的选择。强大的调试功能会让你事半功倍!推荐浏览使用chrome的另一个好处是查找资料更多更全面。

服务器软件:Apache、Tomcat等,这个是非必须的。但是有些函数需要放置于服务器目录下,才能正常运行,比如关于导入json文件的函数

学习网站

以下是几个学习网页制作和D3的网站:

SVG


可缩放矢量图形,即SVG,是W3C XML的分支语言之一,用于标记可缩放的矢量图形

SVG-菜鸟课程

SVG|MDN

SVG图像入门教程|阮一峰老师

 

D3.js


第一个推荐的网站肯定是D3官网,包含很多的示例和API文档,都是根据最新的版本发布的。还有几个不错的网站

标签:网页,SVG,js,文档,可视化,D3
From: https://www.cnblogs.com/miangao/p/17438226.html

相关文章

  • 金额处理currency.js
    <template><div><el-buttontype="primary"@click="test">按钮</el-button><p></p></div></template><script>importcurrencyfrom'currency.js'expo......
  • js 原型链
            ......
  • 错误解决:These dependencies were not found: core-js/modules/es.array.push.js
    错误描述执行npmrundev后报错:Thesedependencieswerenotfound:core-js/modules/es.array.push.jsin./node_modules/@babel/runtime/helpers/objectSpread2.js,./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/@vue/cli-pluvue?vue&type=script&la......
  • threejs创建圆柱体
    threejs创建圆柱体 创建一个几何体(geometry):使用Three.js的几何体类创建一个几何体,该类将定义您的几何体的形状和大小。例如,您可以使用以下代码创建一个圆柱体:vargeometry=newTHREE.CylinderGeometry(5,32,32); 这将创建一个高度为5、半径为32的圆柱体。创建......
  • amzon s3/minio获取预签名上传url,及js使用预签名url上传文件
      $("#btnSubmit").click(function(event){varfile=$("#ipfile")[0].files[0];varcontentType=!!file.type?file.type:"video/x-flv";//请求api接口:调用amzons3/minio的sdk获取临时上传......
  • 如何通过Python将JSON格式文件导入redis?
    摘要:如果希望将JSON文件导入到Redis中,首先要做的就是连接到redis服务。本文分享自华为云社区《Python将JSON格式文件导入redis,多种方法》,作者:梦想橡皮擦。在导入前需要先确定你已经安装Redis,并且可以启动相关服务。windows上启动redis的命令是redis-server.exer......
  • 在jsp中为a标签的href属性拼接动态变量的方法
    在做web项目练习时遇到了一个需要为href拼接动态变量的问题,在jsp中有这么一段代码实现用户的删改功能。首先摆出我一开始错误的代码来说明问题。<html><head><title>人员管理</title></head><body><%//从后端Servlrt获取的一个储存我自定义的Persion对象的ListList<Pers......
  • React18+TS+NestJS+GraphQL全栈开发示例
    React18+TS+NestJS+GraphQL全栈开发示例全栈开发是指一位开发人员可以熟练掌握前端、后端和数据库等多个领域的技术,能够完整地开发一个应用程序。在本文中,我们将介绍如何使用React18+TS+NestJS+GraphQL这个技术组合来进行全栈开发。技术选型在开始开发之前,我们需要选择合适的技术栈......
  • 理解JS中数组的常见应用
    JavaScript中数组是用方括号包裹起来的一组元素,各元素之间以逗号隔开,例如:vararray=[1,2,4,6];如上述代码所示,数组array是若干整数构成的数组。数组元素的获取获取数组元素需采用数组名加下标的方式。下标从0到数组长度减一,第一个元素用arry[0]表示,第二个元素用arry[1]表......
  • jsp学习日志一,基本用法和隐式对象
    基本用法在第一个index.jsp文件中<formaction="monday-01.jsp"><inputtype="text"name="uname"><inputtype="submit"value="提交"></form>而monday.jsp文件中<%Stringa=request.getPa......