d3.jsを試してみた

投稿日:

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

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

へのへのもへじ

クリックしたら円がふる

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

like a 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でググれば色々出てくると思います。

参考にさせて頂きました

作成者: shimabox

Web系のプログラマをやっています。 なるべく楽しく生きていきたい。

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください