EagleLand

D3.jsでColor Pickerを作った

Published at 2016-05-02

D3.jsの素振りをしていて、何か練習台になるものはと探していたらA Simple Web Developer’s Guide To ColorDribbbleやらDesignspirationにあるようなカラーピッカーが紹介されていたので、真似てColor Pickerを実装した。機能としては、予め用意してある色がパレットのように陳列されていて、クリックするとそのカラーコードをコピー出来るという単純なもの。ある程度整頓された色の中から選んで使いたいことは多々あったので、その個人的な問題はコレで解決できそう。

クリックでコピーできる機能についてはclipboard.jsを使っているのでFlashに依存していない代わりに、execCommandがアレなSafariではコピーは機能しない。

D3.js雑感

少ししか触っていないけど、以下雑感。

次のコードはコアAPIの簡単な使い方。

const svg = d3.select('body')       // bodyを参照する
  .append('svg')                    // svgをappend()し、参照する
  .attr('width', '100vw')           // widthに100vwを指定する
  .attr('height', '100vh');         // heightに100vhを指定する

const rects = svg.selectAll('rect') // svg要素下のrectを参照するが、この時点では何もない
  .data([10, 20, 30, 40, 50])       // selectAll()によるセレクションに対してデータをバインドする
  .enter()                          // セレクションにバインドしたデータの数だけプレースホルダーを作る
  .append('rect')                   // プレースホルダーにrectをappend()する
  .attr('width', d => d)            // バインドしたデータのひとつひとつをwidthに指定する
  .attr('height', d => d)           // バインドしたデータのひとつひとつをheightに指定する
  .attr('x', (d, i) => 100 * i)     // 第2引数にはインデックスが返るので、これを使ってx座標は100ずつずらす
  .attr('y', 0)                     // y座標に0を指定し、上に揃える
  .attr('fill', d => `rgb(${d}, ${d * 2}, ${d * 3})`);

これで次のようなSVGが出力される。

<svg width="100vw" height="100vh">
  <rect width="10" height="10" x="0" y="0" fill="rgb(10, 20, 30)"></rect>
  <rect width="20" height="20" x="100" y="0" fill="rgb(20, 40, 60)"></rect>
  <rect width="30" height="30" x="200" y="0" fill="rgb(30, 60, 90)"></rect>
  <rect width="40" height="40" x="300" y="0" fill="rgb(40, 80, 120)"></rect>
  <rect width="50" height="50" x="400" y="0" fill="rgb(50, 100, 150)"></rect>
</svg>

コアの使い方を覚えてからは、Layoutsというデータレイアウトの手段を見始めていて、これにはノード同士の物理シミュレーションを行うForceやノード同士の階層構造を表現するPackなどが含まれている。これらが理解できてくるといよいよD3が本領発揮できそうだが、理系脳がだいぶ眠っているのでまずはリハビリから。

タイトルと URL をコピーしました