D3.js学习笔记(六)——SVG基础图形和D3.js
目标
在这一章,我们将会重温SVG图形,学习如何使用D3.js来创建这些图形。
这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性。
使用D3.js画一个SVG 的 圆 circle
可以使用如下代码创建:
<svg width="50" height="50">
<circle cx="25" cy="25" r="25" fill="purple" />
</svg>
我们在前面的章节已经讲过了使用D3.js来创建SVG圆形。
var jsonCircles = [
{"x_axis":30,"y_axis":30,"radius":20,"color":"greeen"},
{"x_axis":70,"y_axis":70,"radius":20,"color":"purple"},
{"x_axis":110,"y_axis":100,"radius":20,"color":"red"}
]; var svgContainer = d3.select("body").append("svg")
.attr("width",200)
.attr("height",200); var circles =svgContainer.selectAll("circle")
.data(jsonCircles)
.enter()
.append("circle"); var circleAttributes = circles
.attr("cx",function(d){return d.x_axis;})
.attr("cy",function(d){return d.y_axis;})
.attr("r",function(d){return d.radius;})
.style("fill",function(d){return d.color;});
将上述例子化简后,可以看做这一过程为两步:
- 创建SVG容器(SVG坐标空间)
- 画圆形
因此,在最简单的情况,JavaScript代码为:
//创建一个SVG容器
var svgContainer = d3.select("body").append("svg")
.attr("width",200)
.attr("height",200); //画圆形
var circle = svgContainer.append("circle")
.attr("cx",30)
.attr("cy",30)
.attr("r",20);
结果是:
画圆的时候,必须的SVG属性是:“cx”、“cy”以及“r”。
注意——如果我们缺省了“style”-样式函数,那么我们得到的就是一个黑色的圆形。不过也还好,因为首要的是先画出来圆形,之后在考虑的是样式。
在此要强调的是,使用D3.js画SVG的圆形时,最为重要的属性是:cx,cy和r。
使用D3.js画SVG的 长方形 Rectangle
我们可以用下面的代码画出一个长方形:
<svg width="50" height="50">
<rect x="0" y="0" width="50" height="50" fill="green"/>
</svg>
通过前面的圆形例子,我们大概可以猜得出,创建一个长方形,必须的是“x”,"y","width"以及"height".
我们也可以把画长方形分成两步:
- 创建一个SVG容器(SVG坐标空间)
- 画长方形
因此,在最简单的情况下,我们的JavaScript代码如下:
//创建一个SVG容器
var svgContainer = d3.select("body").append("svg")
.attr("width",200)
.attr("height",200); //画长方形
var rectangle = svgContainer.append("rect")
.attr("x",10)
.attr("y",10)
.attr("width",50)
.attr("height",100);
结果是:
画长方形的必须属性是“x”、"y"、"width"以及"height"。
注意—同上,如果缺省Style()方法,得到的是黑色的长方形。
两个需要注意的点是:
- SVG中指代长方形(rectangle)的关键词是rect。因此我们写的是.append("rect")而不是.append("rectangle")。
- SVG坐标系统的布局中,高height是自上而下的。
在此要强调的是,使用D3.js画SVG的长方形时,最为重要的属性是:x,y,width和height。
使用D3.js画SVG的 直线 Straight Line
使用下面的代码可以创建直线:
<svg width="50" height="50">
<line x1="5" y1="5" x2="40" y2="40" stroke="grey" stroke-width="5" />
</svg>
同样的,我们大概猜到画直线必须的是:"x1","y1","x2","y2".
我们同样可以分为两步:
- 创建SVG容器(SVG坐标空间)
- 画直线
最简单的例子为:
//创建SVG容器
var svgContainer = d3.aelect("body").append("svg")
.attr("width",200)
.attr("height",200); //画直线
var line = svgContainer.append("line")
.attr("x1",5)
.attr("y1",5)
.attr("x2",50)
.attr("y2",50)
结果是:
我们画的直线在哪了???SVG元素就在那里,但是我们却看不到。
这是因为SVG的“line”元素就仅仅是“线",在几何学上讲是一维的,他是没有大小粗细的,没有所谓的“内部”。
这也就是说,“line”元素不可能被“填充(filled)”(即fill属性)。
也就是说,直线是不占用空间的——因此实际上,我们什么都看不到。
为了解决这个问题,我们需要确保:
- .attrbute("stroke-width",NUMBER),其中的NUMBER是指直线的宽
- .attribute("stroke","COLOR"),其中COLOR是指用来给直线着色的颜色
因此,修改后的最简例子为:
//创建一个SVG容器
var svgContainer = d3.select("body").append("svg")
.attr("width",200)
.attr("height",200); //画直线
var line = svgContainer.append("line")
.attr("x1",5)
.attr("y1",5)
.attr("x2",50)
.attr("y2",50)
.attr("stroke","black")
.attr("stroke-width",2);
结果是:
太棒了!现在看的到啦!
画直线必须的SVG属性是"x1","y1","x2","y2","stroke"以及"stroke-width"。
注意-这里我们没有使用style方法,因为‘line’元素只是‘线’而已,没有“内部”可言,也就没有什么填充色之类的,在几何学上将,它是一维的。所以,我们在设置其样式的时候,就需要设置“stroke”颜色以及“stroke-width”。
使用D3.js画折线和多边形
在基本图形中,我们还应该画“折线(polyline)”和“多边形(polygon)”。
可以通过下面的代码创建SVG折线和多边形:
折线 代码:
<svg width="50" height="50">
<polyline fill="none" stroke="blue" stroke-width="2"
points = "05,30
15,30
15,20
25,20
35,10 "/>
</svg>
多边形 代码:
<svg width="50" height="50">
<polygon fill="yellow" stroke="blue" stroke-width="2"
points="05,30
15,30
25,20
25,10
35,10" />
</svg>
通过上面这些圆形、长方形、直线的例子,你大概能猜到,要创建一个折线 和 多边形 图形,需要的属性是:“stroke”、“stroke-width”以及“points”。对于多边形Polygon还需要“fill”属性。
然而,正如你所看到的,points属性包含了一个点(point)列表,其中节点的x,y值由逗号隔开,每对坐标值之间通过空格隔开。
这样做很不美观。D3.js热衷于数据可视化以及美好的事物,d3.js的惯例是使用D3.svg.line()生成器来画折线和多边形。
为了能够使用D3.js创建SVG基本图形折线(Polyline)和多边形(Polygon),我们将必须学习SVG Paths。
D3.js学习笔记(六)——SVG基础图形和D3.js的更多相关文章
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- WebGL three.js学习笔记 加载外部模型以及Tween.js动画
WebGL three.js学习笔记 加载外部模型以及Tween.js动画 本文的程序实现了加载外部stl格式的模型,以及学习了如何把加载的模型变为一个粒子系统,并使用Tween.js对该粒子系统进行 ...
- SVG基础图形和D3.js
使用D3.js画一个SVG 的 圆 circle 可以使用如下代码创建: <svg width="50" height="50"> <circ ...
- Ext JS学习第八天 Ext基础之 认识Ext.js 和Ext-more.js
此文来记录学习笔记: •认识Ext.js 和Ext-more.js •首先,我们要知道这2个js文件的作用,这俩个文件包含了Ext的一些基础定义.基本的属性和方法,我们要重点学习和深入底层代码进行研究 ...
- Java基础学习笔记六 Java基础语法之类和ArrayList
引用数据类型 引用数据类型分类,提到引用数据类型(类),其实我们对它并不陌生,如使用过的Scanner类.Random类.我们可以把类的类型为两种: 第一种,Java为我们提供好的类,如Scanner ...
- Node.js学习笔记(六) --- Nodejs 的非阻塞 I/O、 异步、 事件驱动
1. Nodejs 的单线程 非阻塞 I/O 事件驱动在 Java. PHP 或者.net 等服务器端语言中,会为每一个客户端连接创建一个新的线程.而每个线程需要耗费大约 2MB 内存.也就是说,理论 ...
- JS 学习笔记 (六) 函数式编程
1.函数闭包 1.1 概述 JavaScript采用词法作用域,函数的执行依赖于变量作用域,这个作用域是在函数定义时决定的,而不是函数调用时决定的. 为了实现这种词法作用域,JavaScript函数对 ...
- Node.js学习笔记2(安装和配置Node.js)
1.安装 windows下安装,在http://nodejs.org下载安装包进行安装即可. linux下安装,使用yum或者下载源码进行编译. ...
- WebGL three.js学习笔记 使用粒子系统模拟时空隧道(虫洞)
WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...
随机推荐
- R中的各种概率统计分布
名称 名称 R对应的名字 附加参数 β分布 beta beta shape1, shape2, ncp 二项式分布 binomial binom size, prob 柯西分布 Cauchy cauc ...
- Hadoop集群搭建文档
环境: Win7系统装虚拟机虚拟机VMware-workstation-full-9.0.0-812388.exe Linux系统Ubuntu12.0.4 JDK j ...
- 【node】---multer模块实现图片上传---【巷子】
1.安装muterl第三方模块 cnpm install multer --save 2.使用 multer在解析完成后,会向request对象中添加一个body对象和一个file或者files对象( ...
- 10.Curator队列
Curator也提供ZK Recipe的分布式队列实现.利用ZK的 PERSISTENTSEQUENTIAL节点,可以保证放入到队列中的项目是按照顺序排队的.如果单一的消费者从队列中取数据,那 ...
- Spring源码学习之IOC容器实现原理(一)-DefaultListableBeanFactory
从这个继承体系结构图来看,我们可以发现DefaultListableBeanFactory是第一个非抽象类,非接口类.实际IOC容器.所以这篇博客以DefaultListableBeanFactory ...
- centos LB负载均衡集群 三种模式区别 LVS/NAT 配置 LVS/DR 配置 LVS/DR + keepalived配置 nginx ip_hash 实现长连接 LVS是四层LB 注意down掉网卡的方法 nginx效率没有LVS高 ipvsadm命令集 测试LVS方法 第三十三节课
centos LB负载均衡集群 三种模式区别 LVS/NAT 配置 LVS/DR 配置 LVS/DR + keepalived配置 nginx ip_hash 实现长连接 LVS是四层LB ...
- sql小知识
1:查询某一段落内的几条数据,按时间降序. LIMIT 5,10; //检索记录行6-15 2:创建视图, 查询出某些类别的数据,保存在视图中. || 的优先级高于and ) ); 3: 查询出 ...
- tcp/udp/socket 端口映射,转发小工具
1) 利用 Python 的 Socket 端口转发,用于远程维护 https://github.com/knownsec/rtcp 2) 反向端口转发工具 Reverse TCP Port to U ...
- vue基础篇(一)
1.简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手 ...
- 【Lua】面向对象编程(二)
多重继承: module(...,package.seeall) local function search(k,plist) ,#plist do local v=plist[i][k] if ...