2013/08/01

HTML5 D3.js 初體驗

最近想用JavaScript畫出一些動態數據圖或是圓餅圖，所以就決定用D3.js了
D3.js是一個繪圖功能強大的JavaScript

這次的範例就是利用繪圖功能，直接畫出一隻類似米老鼠的老鼠XDDD

D3.js能做很多動態的繪圖處理，那我就大概貼幾個範例XD


一群蟲子在動XD

關聯圖

Bubble Chart









<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8"/>
        <script src="http://d3js.org/d3.v3.min.js"></script>
        <title>D3.JS demo</title>
    </head>
    <body>
 <script type="text/javascript">
     d3.select('body').style('background-color', 'darkgrey');

     var svg = d3.select('body').append('svg');

     svg.append('circle').attr({
         cx: 60,
         cy: 60,
         r: 50
     }).style({
         fill: 'black'
     });

     svg.append('circle').attr({
         cx: 200,
         cy: 60,
         r: 50
     }).style({
         fill: 'black'
     });

     svg.append('circle').attr({
         cx: 130,
         cy: 120,
         r: 70
     }).style({
         fill: 'black'
     });

     svg.append('ellipse').attr(
     {
         cx:100,
         cy:120,
         rx:15,
         ry:35
     }).style({
         fill: 'white'
     });

     svg.append('ellipse').attr(
     {
         cx:160,
         cy:120,
         rx:15,
         ry:35
     }).style({
         fill: 'white'
     });

     svg.append('ellipse').attr(
     {
         cx:160,
         cy:120,
         rx:10,
         ry:15
     }).style({
         fill: 'black'
     });

     svg.append('ellipse').attr(
     {
         cx:100,
         cy:120,
         rx:10,
         ry:15
     }).style({
         fill: 'black'
     });

     svg.append('ellipse').attr(
     {
         cx:130,
         cy:170,
         rx:10,
         ry:7
     }).style({
         fill: 'white'
     });
 </script>
    </body>
</html>

一隻很像老鼠的假米奇就長這樣啦XD




參考資料：
http://d3js.org/
http://mbostock.github.com/d3/
http://mbostock.github.io/d3/tutorial/circle.html
http://abgne.tw/d3/d3-getting-stared/d3-draw-d3-shape-ellipse.html
By at