d3.jsを試してみた

夜、虫が鳴き出しました。夏ですね。

というわけで、タイトルにある通りd3.jsを使って何個か書いてみました。
今更感 && 大したものじゃないけど一応載せておきます。
d3.jsって何？って人はググってみてください。

へのへのもへじ

• へのへのもへじ – jsdo.it – Share JavaScript, HTML5 and CSS
• しの文字をd3.svg.line()を使って表現
• だけど、しが微妙

クリックしたら円がふる

• クリックしたら円がふる – jsdo.it – Share JavaScript, HTML5 and CSS
• こちらを参考(パクリ)しますた http://bl.ocks.org/mbostock/1062544
• 画面をクリックすると円がふります(スマホもOK)

マウスダウンで円を集める

• マウスダウンで円を集める – jsdo.it – Share JavaScript, HTML5 and CSS
• マウスダウン(スマホだったらタッチ)で円が集います

like a seven nation army

• like a seven nation army – jsdo.it – Share JavaScript, HTML5 and CSS
• The White Stripesが好きなので、The White Stripes – ‘Seven Nation Army’を真似てみた
• 簡単に真似ただけなので、ざっくりだよ

一応、tips (自分で便利だなーと思った所)

クリックとタッチイベントを分ける時

svg.append("rect")
    .attr("width", width)
    .attr("height", height)
    // こんな感じで ontouchstart が存在するか判定
    .on("ontouchstart" in document ? "touchstart" : "click", draw);

色を混ぜたい (これ、個人的にかなり感動した)

// hsl版の d3.interpolateHsl() 等、他にもあるよ
var interpolateRgb = d3.interpolateRgb("#ff0000", "#0000ff");

// 0.5は半分に混ぜるイメージ
// 0.5以下は、interpolateRgb()の第1引数の色に寄っていくし、逆は第2引数の色に寄っていく（気がする）
var rgb = d3.rgb(interpolateRgb(0.5)); 

console.log(rgb.r, rgb.g, rgb.b); // => 128 0 128 すなわち、紫(#800080)

イベント dispatch (これも、めっちゃ便利)

// hogeイベント登録
var dispatch = d3.dispatch("hoge");

// イベント監視を行ってから、イベントを発行する。これ大事。

// イベント監視
dispatch.on("hoge", function(args) {
    console.log(args); // => Hello
});

// イベント発行（もちのろん引数も渡せる）
dispatch.hoge("Hello");

polygonを描画したい (pointsの生成)

// なんか、ひし形っぽい形になる座標
var poly = [
    {'x':231.5,'y':230},
    {'x':232.5,'y':228},
    {'x':233.5,'y':230},
    {'x':232.5,'y':232}
];

// 描画 （抜き出しただけなので動かないかも）
svg.selectAll('svg')
    .data(poly)
    .enter()
    .append('polygon')
    // mapを使う！
    .attr('points', function(d) {
        return d.map(function(_d) {
            return [_d.x, _d.y].join(',');
        }).join(' ');
    });

まとめ

何か作りたいなぁと思ったら、Galleryを見てインスピレーションをもらい、分からんなぁと思ったらD3.js – 日本語ドキュメントを見るといいと思います。
他にもd3.jsでググれば色々出てくると思います。

参考にさせて頂きました

• javascript – Proper format for drawing polygon data in D3 – Stack Overflow
• D3.js の d3.svg.line() を試してみた
• D3.js で自作クラスにイベント発行機能を追加する