JavaScript初心者が、D3.jsをRailsで簡単に使ってみたい

# 0.前提
|種類|内容|
|:-:|:-:|
|OS|Mac OS X 10.9.4
|Ruby| 2.1.1
|Rails| 4.1.2
今回、自分のサービスを作る際にグラフなど視覚的に見せたいものがあり、これらを全てD3.jsで描画することにしました。
なぜD3.jsなのかという話なのですが、まずimgは嫌だったのでjsなどで書きたいのと、リファレンスや書籍などの豊富さから選択しました。
初心者でもできる簡単なものを参考程度にメモっておきました。

途中書きなので、また時間があるときにグラフの書き方などは追加する。

# 1.動かすまで
## まずは、D3.jsの本体をダウンロードします。

```
$ wget http://d3js.org/d3.v3.min.js
```

## では、次にRailsにセットアップします。

### railsのプロジェクトsampleを作成して起動確認します

```
$ rails new sample -T
$ rails s -p 3001
$ rails g controller welcome index
```

### d3.jsをrailsにコピーします

```
$ cp ~(先ほどwgetした場所) sample/vendor/assets/javascripts
```

```sample/app/assets/javascripts/application.js
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require d3.v3.min
//= require_tree .
```
###svgを使って球体を出現させてみましょう

```app/views/welcome/index.html.erb
<script type="text/javascript">
  var dataset = [3,6,9,12,15];

  var svg = d3.select("body").append("svg");

  var circle = svg.selectAll("circle").data(dataset).enter().append("circle");
  circle.attr("cx", function(d, i) {
    return (i * 50) + 25;
  }).attr("cy", 25)
  .attr("r", function(d) {
    return d;
  }).attr("fill", "green").attr("stroke", "yellow")
  .attr("stroke-width", function(d) {
    return d / 2;
  });

</script>
```
bodyをセレクタで探してsvgを追加してます。
circleというのは、球体のことです。こいつにdatasetをあげてます。
あとは、この球体にcx, cy, y要素を追加して、fill, strokeなどで配色などを追加してます。

-----------------------



```welcome_controller.rb
def show
  @value1 = "test"
  @value2 = "sample"
  @value3 = "ok"
end

# views側
var dataset = [<%= @value1 %>, <%= @value2 %>, <%= @value3 %>]
```
作法的に正しいのかまだ調査ができてませんが、controllers側から持って来たデータも先ほどのdatasetに突っ込めば出力はできます。
###開発の流れ
railsの場合は、上記の設定でapplication.html.erbには既にD3.jsが読み込まれているので、welcome/index.html.erbなどの新しく作ったcontrollerのviewsのbody部分にscriptタグを追加していく形となります。

#2.scale

##scale
domainをrangeにマップするものです

何を言っているかよくわからないと思います
要は、domainというのが入力値を表しています。例えば、家計簿でグラフを作る際に、100〜1000円/日の費用がかかったとします。
その際のdomainは100 〜 1000ということになります。
一方rangeというのは出力値を表しています。先の例で言えば、10 〜 100の範囲で見せたいということもあるでしょう。

グラフの見せ方の話ですが、今日800円の費用がかかったとして、それをdomainとして入力すると、rangeはそれを80として出力します。イメージはそんなようなところです。

```app/views/welcome/index.html.erb
<script type="text/javascript">
  var w = 500;
  var h = 300;
  var svg = d3.select("body").append("svg").attr("width", w).attr("height", h);
  var scale = d3.scale.linear().domain([100, 1000]).range([10, 100]);
</script>
```
デベロッパーコンソールで確認してみましょう。

```
> scale(300)
<- 30
> scale(215)
<- 21.5
```
入力値に対して、出力値がこれではっきり出たと思います。

##メモリ

```app/views/welcome/index.html.erb
<script type="text/javascript">

  // 省略

  svg.append("g").call(d3.svg.axis().scale(scale));
</script>
```
axis()でメモリを出せます。scaleでどのスケールと作用するのか決めます。gは要素の構成に対する一貫性を表していますので、必須ではないです。


続く


#X.参考資料
とはいえ、JS初心者なので、書き方などもJSの方からも参考にしました。

## 書籍
[JavaScript: The Good Parts](http://www.amazon.co.jp/JavaScript-The-Good-Parts-%E2%80%95%E3%80%8C%E8%89%AF%E3%81%84%E3%83%91%E3%83%BC%E3%83%84%E3%80%8D%E3%81%AB%E3%82%88%E3%82%8B%E3%83%99%E3%82%B9%E3%83%88%E3%83%97%E3%83%A9%E3%82%AF%E3%83%86%E3%82%A3%E3%82%B9/dp/4873113911/ref=sr_1_11?s=books&ie=UTF8&qid=1411473898&sr=1-11&keywords=javascript)
[JavaScriptパターン](http://www.amazon.co.jp/JavaScript%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3-%E2%80%95%E5%84%AA%E3%82%8C%E3%81%9F%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE%E4%BD%9C%E6%B3%95-Stoyan-Stefanov/dp/4873114888/ref=sr_1_23?s=books&ie=UTF8&qid=1411473898&sr=1-23&keywords=javascript)

## Web
[Bootstrap](http://getbootstrap.com/)
[D3.js API reference](https://github.com/mbostock/d3/wiki/API-Reference)