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

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

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

做一个简单的图表

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

svg画布：svg绘制的是矢量图（还有canvas画布，这个是JavaScript用来绘制2D图像的，是位图）
rect元素：是d3中在svg中绘制矩形的元素
g元素：分组的时候使用

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

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画布var g = svg.append("g")//定义一个用来装整个图表的一个分组，并设置他的位置.attr("transform","translate("+marge.top+","+marge.left+")");

其中.attr(xxxx)是用来设置属性的，而这里的“transform”是用来设置位置，

注意："translate("+marge.top+","+marge.left+")"这句话本质上是一个字符串，因为其中有变量，所以使用字符串拼接

3、画出矩形

var rectHeight = 30;//设置每一个矩形的高度g.selectAll("rect").data(dataset).enter().append("rect").attr("x",20)//设置左上点的x.attr("y",function(d,i){//设置左上点的yreturn i*rectHeight;}).attr("width",function(d){//设置宽return d;}).attr("height",rectHeight-5)//设置长.attr("fill","blue");//颜色填充

其中g.selectAll("rect")
.data(dataset)
.enter()
.append("rect") 我们在前面已经学过这段话表示添加足够的rect元素（也就是enter的用法）

运行结果：

效果预览：点击浏览效果

源码浏览：点击源码浏览

（翻外篇）d3.js在网页端可视化neo4j图数据库

为了让大家更好的学习d3.js，“d3.js在网页端可视化neo4j图数据库”这是一个比较综合的项目——利用neo4j的java驱动API从neo4j中取数据，并利用d3.js在网页端进行可视化。大家在学完基础课程后可以做一下这个项目，进行巩固。点击下面链接进行查看：d3.js可视化neo4j图数据库项目专栏

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

D3.js的v5版本入门教程（第一章）—— 如何在项目中使用D3.js
D3.js的v5版本入门教程(第一章) 1.需要的一些工具这个其实随便!最简单的就是建一个.txt文件就可以敲起代码来!作者本人用的是myeclipse(主要需要安装tomcat),因为写的是前端, ...
D3.js的v5版本入门教程（第十四章）—— 力导向图
D3.js的v5版本入门教程(第十四章) 这一章我们来绘制一个力导向图,什么叫力导向图,通俗一点将就是有节点和线组成,当鼠标拖拽一个节点时,其他节点都会受到影响(力导向图有多种类型,本章绘制的效果就是 ...
D3.js的v5版本入门教程（第十三章）—— 饼状图
D3.js的v5版本入门教程(第十三章) 这一章我们来绘制一个简单的饼状图,我们只绘制构成饼状图基本的元素--扇形.文字,从这一章开始,内容可能有点难理解,因为每一章都会引入比较多的难理解知识点,在这 ...
D3.js的v5版本入门教程（第五章）—— 选择、插入、删除元素
D3.js的v5版本入门教程(第五章) 1.选择元素现在我们已经知道,d3.js中选择元素的函数有select()和selectAll(),下面来详细讲解一下假设我们的<body>中有 ...
D3入门教程——做一个简单的图表
文章目录一.准备 1.什么是画布 1)SVG 2)Canvas 3)两者之前的区别二.开始 1.添加画布 2.绘制矩形三.完整代码一.准备 1.什么是画布 HTML 5 提供两种强有力的&qu ...
python网页爬虫菜鸟教程_python菜鸟想做一个简单的爬虫求教程
贴一个爬虫给你: 因为要做观点,观点的屋子类似于知乎的话题,所以得想办法把他给爬下来,搞了半天最终还是妥妥的搞定了,代码是python写的,不懂得麻烦自学哈!懂得直接看代码,绝对可用 #coding: ...
d3.js画柱状图超详细教程
d3.js画柱状图超详细教程完整代码下载链接:https://download.csdn.net/download/qq5q13638/85248934,直接用这个文件夹内打开即可. 下面是完整教程 ...
ArcGIS for Desktop入门教程_第二章_Desktop简介 - ArcGIS知乎-新一代ArcGIS问答社区
原文:ArcGIS for Desktop入门教程_第二章_Desktop简介 - ArcGIS知乎-新一代ArcGIS问答社区 1 Desktop简介 1.1 ArcGIS for Desktop ...
ArduinoYun快速入门教程第1章ArduinoYun概览
ArduinoYun快速入门教程第1章ArduinoYun概览本章是全书的开篇,在本章笔者将把Arduino以及Yun的方方面面介绍给大家.其中包括Arduino这个术语的解释.Yun相对其他开发板 ...

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

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

最新文章

热门文章