d3.js使用svg制作图标
1. 如果你不懂svg,请参考这里:http://www.w3school.com.cn/svg/index.asp
柱形图是一种最简单的可视化图标,主要有矩形、文字标签、坐标轴组成。本文为简单起见,只绘制矩形的部分,用以讲解如何使用 D3 在 SVG 画布中绘图。
画布是什么
前几章的处理对象都是 HTML 的文字,没有涉及图形的制作。
要绘图,首要需要的是一块绘图的“画布”。
HTML 5 提供两种强有力的“画布”:SVG 和 Canvas。
SVG 是什么
SVG,指可缩放矢量图形(Scalable Vector Graphics),是用于描述二维矢量图形的一种图形格式,是由万维网联盟制定的开放标准。SVG 使用 XML 格式来定义图形,除了 IE8 之前的版本外,绝大部分浏览器都支持 SVG,可将 SVG 文本直接嵌入 HTML 中显示。
SVG 有如下特点:
- SVG 绘制的是矢量图,因此对图像进行放大不会失真。
- 基于 XML,可以为每个元素添加 JavaScript 事件处理器。
- 每个图形均视为对象,更改对象的属性,图形也会改变。
- 不适合游戏应用。
Canvas 是什么
Canvas 是通过 JavaScript 来绘制 2D 图形,是 HTML 5 中新增的元素。
Canvas 有如下特点:
- 绘制的是位图,图像放大后会失真。
- 不支持事件处理器。
- 能够以 .png 或 .jpg 格式保存图像
- 适合游戏应用
添加画布
D3 虽然没有明文规定一定要在 SVG 中绘图,但是 D3 提供了众多的 SVG 图形的生成器,它们都是只支持 SVG 的。因此,建议使用 SVG 画布。
请看demo和注释:
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><script src="../libs/d3.min.js" charset="utf-8"></script> </head> <body></body> </html><script>var width = 300; //画布的宽度 var height = 300; //画布的高度 var svg = d3.select("body") //选择文档中的body元素 .append("svg") //添加一个svg元素 .attr("width", width) //设定宽度 .attr("height", height) //设定高度 .attr("id","mySvg"); //设置id属性 var dataset = [ 250 , 210 , 170 , 130 , 90 ]; //数据(表示矩形的宽度) var rectHeight = 25; //每个矩形所占的像素高度(包括空白) svg.selectAll("rect") //选择svg内所有的矩形 .data(dataset) //绑定数组 .enter() //指定选择集的enter部分 .append("rect") //添加足够数量的矩形元素 .attr("x",20).attr("y",function(d,i){return i * rectHeight;}).attr("width",function(d){return d;}).attr("height",rectHeight-2).style("fill","steelblue");/*var body = d3.select("body"); body.append("p","#mySvg").text("1111");*/ </script>
关于d3.attr
一个可以处理很多情况的函数,当只传入一个参数时,如果是string,则返回该属性值,如果是对象,则遍历设置对象的键值对属性值,如果参数大于等于2,则是普通的设置样式:
var node = d3.select('body')node.attr('class')
> 返回该属性值node.attr('class', 'haha')
> 设置该属性值node.attr({'class': 'haha', 'x': '10'})
> 设置该属性值
那么怎么做到一个函数处理多种情况,很明显是根据参数的数量来区别对待:
d3_selectionPrototype.attr = function(name, value) {
if (arguments.length < 2) {
if (typeof name === "string") {
var node = this.node();
name = d3.ns.qualify(name);
return name.local ? node.getAttributeNS(name.space, name.local) : node.getAttribute(name);
}
for (value in name) this.each(d3_selection_attr(value, name[value]));
return this;
}
return this.each(d3_selection_attr(name, value));
};
关于getAttributeNS我们可以不用理会,对于web端,d3在设置和获取属性的时候用的都是getAttribute和setAttribute。
对于d3_selection_attr函数,它返回一个通用函数,该函数会对当前对象设置对应的属性值:
大概的思想:
function d3_selection_attr(name, value) {
return function() {
this.setAttribute(name, value);
}
}
d3.js使用svg制作图标相关推荐
- d3.js中svg的下载
svg下载分两种,一种下载带缩放的,一种是下载不带缩放的: 例如有一个缩放后的svg长这样: 如果下载带缩放的,下载结果如下: 如果无视缩放,下载整个svg,那么结果如下: 更多细节请参考文章: d3 ...
- 【项目技术点总结之一】vue集成d3.js利用svg加载图片实现缩放拖拽功能
[项目技术点总结之一]vue集成d3.js利用svg加载图片实现缩放拖拽功能 前言 概述 技术介绍 实现过程 插件安装 引用组件 初始化组件 实现效果 简单理解 使用d3创建一个svg 在svg中提添 ...
- d3.js操作svg
最近有个需求需要用d3来操作svg文件实现svg的缩放及拖拽,同时可以在svg上打点,并对点位进行拖拽,记录下实现过程. d3版本用的是d3.v2.js 具体代码如下: /**svg拖拽和缩放*.sc ...
- D3.js(v3)+react 制作 一个带坐标与比例尺的散点图 (V3版本)
上一章做了柱形图,https://www.cnblogs.com/littleSpill/p/10835041.html 这一章做散点图. 散点图(Scatter Chart),通常是一横一竖两个 ...
- 高手才知道!七个你所不知道的 D3.js 秘技
D3.js ,当前最火红的视觉化套件,你用过了吗?越来越多人使用 D3.js 来开发视觉化专题,但- 你对 D3.js 的了解又到哪里呢?这次我们就带大家一起来看看一些 D3.js 很重要.大家却又普 ...
- D3.js从入门指南
D3.js从入门指南 前言 近期略有点诸事不顺,趁略有闲余之时,玩起D3.js.之前实际项目中主要是用各种chart如hightchart.echarts等,这些图形库玩起来貌都是完美的,一切皆可配置 ...
- d3.js 制作简单的贪吃蛇
d3.js是一个不错的可视化框架,同时对于操作dom也是十分方便的.今天我们使用d3.js配合es6的类来制作一个童年小游戏–贪吃蛇.话不多说先上图片. 1. js snaker类 class Sna ...
- d3.js 制作简单的俄罗斯方块
d3.js是一个不错的可视化框架,同时对于操作dom也是十分方便的.今天我们使用d3.js配合es6的类来制作一个童年小游戏--俄罗斯方块.话不多说先上图片. 1. js tetris类 由于方法拆分 ...
- html5 怎么写动态图形设计,如何用SVG制作酷炫动态图标?(代码实例)
本章给大家介绍在html5中如何用SVG制作酷炫动态图标?(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一.基本图形元素 svg有一些预定义的形状元素:矩形,圆形,椭圆 ...
最新文章
- 【原创】用MySQL 生成随机密码-增加大写处理
- iOS架构-静态库.a编译时自动导出.h头文件(24)
- 题目1171:C翻转
- Source Insight 格式化
- 开源使得所有的软件卖成白菜价,但终将普惠世界!
- 案例:文件下载需求:1. 页面显示超链接 2. 点击超链接后弹出下载提示框 3. 完成图片文件下载||中文文件问题
- Git提交时关于vim的错误
- mysql global index_Oracle中addsplit partition对globallocal index的影响
- python出现的各种问题
- C语言课后习题(20)
- Unity 利用FFmpeg实现录屏、直播推流、音频视频格式转换、剪裁等功能
- 未能连接到驱动人生服务器,更新显卡驱动提示“无法连接到Nvidia”,驱动人生来解决。...
- Oracle LiveLabs实验:Oracle Database Hybrid Active Data Guard
- (用户角色)超级全面的权限系统设计方案
- 什么是爱情——碧海青天BBS
- 【7.talker.py listener.py】转载自他人作品,相关专业知识咨询相关人员!
- 2022寒假day2
- U盘初始化程序对U盘做出的数据修改分析
- RPA用于反洗钱—金融体系数字化转型
- 看大族电机如何用机器人带领我们进入工业4.0时代|镁客网M-TECH AI助力中国智造产业论坛...