您的位置：首页 > Web前端 > JavaScript

d3.js使用svg制作图标

2017-04-14 11:27 351 查看
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);
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航