[JavaScript] d3.jsでSVGのお絵描き « きんくまデザイン

[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();

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