D3.js的学习笔记（一 .介绍svg）
什么是D3.JS? D3.js是一个用于网页作图、生成互动图形的JavaScript函数库。它的主要功能是提供了强大的内置方法，处理数据，画出图形。这就是d3今天来介绍一系列快速掌握D3的经验分享。绘制一个简单的图形要经过下面几个步骤。第一，绘制出需要的图形；第二，把图形与数据进行绑定；在学习如何绘图之前，我们要先掌握SVG。什么是SVG？可伸缩矢量图形 (Scalable Vector Graphics)。svg的特点，使用 XML 格式定义图形；图像在放大或改变尺寸的情况下其图形质量不会有所损失；svg的使用：&svg width=600px height=600px&&/svg&,svg标签相当于要定义宽高的画布，所有的图形元素都定义在画布之中。svg 有一些预定义的形状元素，可被使用和操作：每一个元素可以直接设定元素位置（x,y表示坐标值）宽高（width=&&）和一些常见样式（style=&;;;&）& & 矩形 &rect& ：stroke设置边框颜色，stroke-width设置边框宽度& &&svg&& &&rect width=&100& height=&100& x=&0& y=&0&& && && &style=&fill:&&stroke: stroke-width:5&&&&& &&/svg& & & 圆形 &circle& ：相关属性设置也可以不写在style属性中& & &circle cx=&100& cy=&50& r=&40& stroke=&black& stroke-width=&2& fill=&red&/& cx,cy表示圆心（默认值为0），r表示半径（默认为0）& & 椭圆 &ellipse&& & 线 &line&&&&line x1=&0& y1=&0& x2=&300& y2=&300&/& x1,y1表示起始点，x2,y2表示终点。& &&svg&& &&line x1=&0& y1=&0& x2=&200& y2=&50& stroke-width=&5&&&stroke=&black& /&& &&/svg&& & 折线 &polyline&& & 多边形 &polygon&& & 路径 &path&下面介绍在d3中如何进行svg的开发HTML 代码var width = 960,
height = 500；
var svg = d3.select(&body&).append(&svg&)/*选中body,生成svg元素，设置宽高*/
.attr(&width&, width)
.attr(&height&, height);
d3中&&.attr(&属性名&，“属性值”)与.style(“属性值”，属性名)：& && & style函数为设置html行间样式&&test.style(&width&,&100px&) ————&div style=&width:100px&&& && & attr()直接写在标签内& && && && & test.attr(&widht&,&100px&)———— &div width=100px&
27 总笔记数
2.5万 总阅读量
Copyright &
All Rights Reserved.
合作伙伴：}