[JavaScript] d3.jsでSVGのお絵描き

2015/08/1

こんにちは。きんくまです。

d3.jsっていうグラフとかビジュアライズするのが便利なライブラリがあります。
>> d3.js

グラフを作るのがメインなんですが、今回はそれ使ってお絵描きしてみました。

d3_particle

d3はjQueryみたいにhtmlの要素(Element)をとってきて、それを加工したりすることもできるし、さらにsvgでもいろいろとすることができます。

で、マウスとかのイベントとかも拾うことができるので、クリックすると絵が変化するものをつくってみました。

↓のところをクリックすると動きます。SVGのcircle要素がアニメーションしています。

ソース(TypeScriptです)

/// <reference path="definitions/d3.d.ts" />

module sample{
    var svgWidth = 640;
    var svgHeight = 480;

    export class HelloD3 {
        svg:any;

        constructor(){
            this.svg = d3.select('body').append('svg')
                .attr('width', svgWidth)
                .attr('height', svgHeight);

            this.appendCircles();
            this.update();

            this.svg.on('click', ()=>{
                this.update();
            });
        }

        appendCircles(){
            for(var i = 0, len = 120; i <= len; i++){
                this.svg.append('circle')
                    .style('fill', 'white')
                    .attr({
                        r:30 + (i * 0.3)
                    })
            }
        }

        update(){
            var circle = this.svg.selectAll('circle');
            var r = Math.floor(Math.random() * 255);
            var g = Math.floor(Math.random() * 255);
            var b = Math.floor(Math.random() * 255);
            circle.transition()
                .duration(700)
                .ease('exp-in-out')
                .style('fill', ()=>{ return 'rgb(' + r + ',' + g + ',' + b + ')'; })
                .attr('opacity', ()=>{ return Math.random() * 0.3 + 0.1; } )
                .attr('r', ()=> { return Math.random() * 70; })
                .attr('cx', ()=>{ return Math.random() * svgWidth; })
                .attr('cy', ()=>{ return Math.random() * svgHeight; });
        }
    }
}

var helloD3 = new sample.HelloD3();

けっこうサクサク動くし、何より簡単に書けました!

LINEで送る
Pocket

自作iPhoneアプリ 好評発売中!
フォルメモ - シンプルなフォルダつきメモ帳
ジッピー電卓 - 消費税や割引もサクサク計算!

ページトップへ戻る