【D3.V3.js系列教程】--(十五)SVG基本图形绘制
2013-09-17 22:20
537 查看
【D3.V3.js系列教程】--(十五)SVG基本图形绘制
1、path
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>testD3-13-path.html</title> <script type="text/javascript" src="http://localhost:8080/spring/js/d3.v3.js"></script> <style type="text/css"> </style> </head> <body> <script type="text/javascript"> // 在 body 中插入一個 svg var svg = d3.select('body').append('svg'); // 在 svg 中插入一個 path svg.append('path').attr({ d: 'M50 150Q300 50 300 150T450 150' }).style({ fill: 'none', stroke: 'purple', 'stroke-width': 5 }); </script> </body> </html>
2、折线
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>testD3-14-polyline.html</title> <script type="text/javascript" src="http://localhost:8080/spring/js/d3.v3.js"></script> <style type="text/css"> </style> </head> <body> <script type="text/javascript"> // 在 body 中插入一個 svg var svg = d3.select('body').append('svg'); // 在 svg 中插入 polyline svg.append('polyline').attr({ points: '100,10 40,180 190,60 10,60 160,180 100,10' }).style({ fill: 'black', stroke: 'green', 'stroke-width': 4 }); // 在 svg 中插入 polyline svg.append('polyline').attr({ points: '200,160 240,160 240,120 280,120 280,80 320,80 320,40 360,40 360,160 240,160' }).style({ fill: 'none', stroke: 'green', 'stroke-width': 4 }); </script> </body> </html>
3、多边形
// 在 body 中插入一個 svg var svg = d3.select('body').append('svg'); // 在 svg 中插入 polygon svg.append('polygon').attr({ points: '50,10 20,50 80,50' }).style({ fill: 'none', stroke: '#f0f', 'stroke-width': 4 }); // 在 svg 中插入 polygon svg.append('polygon').attr({ points: '70,10 130,10 100,50 ' }).style({ fill: 'none', stroke: '#520', 'stroke-width': 4 }); // 在 svg 中插入 polygon svg.append('polygon').attr({ points: '150,10 120,50 180,50' }).style({ fill: 'none', stroke: '#f0f', 'stroke-width': 4 });
4、直线
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>testD3-16-line.html</title> <script type="text/javascript" src="http://localhost:8080/spring/js/d3.v3.js"></script> <style type="text/css"> </style> </head> <body> <script type="text/javascript"> // 在 body 中插入一個 svg var svg = d3.select('body').append('svg'); // 在 svg 中插入 line svg.append('line').attr({ x1: 40, y1: 70, x2: 250, y2: 70 }).style({ stroke: 'black', 'stroke-width': 5 }); // 在 svg 中插入 line svg.append('line').attr({ x1: 40, y1: 140, x2: 250, y2: 140 }).style({ stroke: 'black', 'stroke-width': 5 }); // 在 svg 中插入 line svg.append('line').attr({ x1: 100, y1: 10, x2: 100, y2: 200 }).style({ stroke: 'black', 'stroke-width': 5 }); // 在 svg 中插入 line svg.append('line').attr({ x1: 180, y1: 10, x2: 180, y2: 200 }).style({ stroke: 'black', 'stroke-width': 5 }); // 在 svg 中插入 circle svg.append('circle').attr({ cx: 140, cy: 105, r: 20 }).style({ fill: 'none', stroke: 'red', 'stroke-width': 4 }); // 在 svg 中插入 line svg.append('line').attr({ x1: 50, y1: 20, x2: 80, y2: 50 }).style({ stroke: 'black', 'stroke-width': 5 }); // 在 svg 中插入 line svg.append('line').attr({ x1: 80, y1: 20, x2: 50, y2: 50 }).style({ stroke: 'black', 'stroke-width': 5 }); // 在 svg 中插入 circle svg.append('circle').attr({ cx: 220, cy: 180, r: 20 }).style({ fill: 'none', stroke: 'red', 'stroke-width': 4 }); </script> </body> </html>
5、椭圆
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>testD3-17-eclipse.html</title> <script type="text/javascript" src="http://localhost:8080/spring/js/d3.v3.js"></script> <style type="text/css"> </style> </head> <body> <script type="text/javascript"> // 在 body 中插入一個 svg var svg = d3.select('body').append('svg'); // 在 svg 中插入 ellipse svg.append('ellipse').attr({ cx: 100, cy: 60, rx: 30, ry: 50 }).style({ fill: 'pink', stroke: 'green', 'stroke-width': 10 }); // 在 svg 中插入 ellipse svg.append('ellipse').attr({ cx: 200, cy: 60, rx: 30, ry: 50 }).style({ fill: 'pink', stroke: 'green', 'stroke-width': 10, 'fill-opacity': .6 }); // 在 svg 中插入 ellipse svg.append('ellipse').attr({ cx: 145, cy: 180, rx: 110, ry: 40 }).style({ fill: 'pink', stroke: 'green', 'stroke-width': 5, opacity: .6 }); </script> </body> </html>
相关文章推荐
- 【D3.V3.js系列教程】--(十五)SVG基本图形绘制
- 【D3.js数据可视化系列教程】--(十五)SVG基本图形绘制
- Android游戏开发系列教程第二讲(基本图形绘制)
- 【D3.V3.js数据可视化系列教程】--(八)绘制SVG
- [js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形)
- d3 svg 基本图形绘制
- 幻世(OurDream)2D图形引擎使用教程3——基本图形的绘制
- JavaScript实现使用Canvas绘制图形的基本教程
- HTML5之Canvas绘图——使用Canvas绘制图形的基本教程
- 幻世(OurDream)2D图形引擎使用教程4——基本图形的绘制
- SVG(可缩放矢量图形)基本图形绘制方法与path路径命令
- HTML5之SVG 2D入门2―图形绘制(基本形状)介绍及使用
- [置顶] HTML5 绘制图形 Canvas 与 SVG 的基本用法
- HTML5之Canvas绘图——使用Canvas绘制图形的基本教程
- Direct2D教程II——绘制基本图形和线型(StrokeStyle)的设置详解
- Canvas绘图——使用Canvas绘制图形的基本教程
- 使用HTML5进行SVG矢量图形绘制的入门教程
- HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
- 利用SVG path绘制图形--基本图形
- HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用