ドットインストールの「D3.js入門」で出てくるコードをversion 4に対応させてみた

ドットインストールにある[D3.js入門](http://dotinstall.com/lessons/basic_d3js)は、#1から#9までは難なく進めますが、#10からはD3.jsのVersion 4へのアップデートの関係で動かなくなっています。これは、オブジェクトで属性を渡せなくなっているので、横や高さの指定が出来なくなっているためです。
参考：https://www.slideshare.net/xxshimizuxx/d3-ver4/21

この記事では、version 4で動くコードに直した物を載せていきます。
もし、version 3で勉強をしたい場合には、```  <script src="https://d3js.org/d3.v3.min.js"></script>```
を利用すれば良いかと思います。

## #10 データを使ってcircleを描画しよう

1つの属性ごとに`.attr`を使う。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>D3.jsの練習</title>
</head>
<body>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script>
    var dataset = [11,25,43,30,33];
    var w = 500;
    var h = 200;
    var svg = d3.select("body").append("svg").attr("width",w).attr("height",h);
    svg.selectAll("circle")
      .data(dataset)
      .enter()
      .append("circle")
      .attr("cx",function(d,i) { return 50 + (i * 100); })
      .attr("cy",h/2)
      .attr("r",function(d){ return d;})
      .attr("fill","red");
  </script>
</body>
</html>
```

## #11 transitionを使ってみよう

[d3-ease](https://github.com/d3/d3-ease)を利用する。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>D3.jsの練習</title>
</head>
<body>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-ease.v1.min.js"></script>
  <script>
    var dataset = [11,25,43,30,33];

    var w = 500;
    var h = 200;

    var svg = d3.select("body").append("svg").attr("width",w).attr("height",h);
    var ease = d3.easeBounceIn;

    svg.selectAll("circle")
      .data(dataset)
      .enter()
      .append("circle")
      .attr("cx",function(d,i) { return 50 + (i * 100); })
      .attr("cy",h/2)
      .attr("r",0)
      .attr("fill","red")
      .transition()
      .ease(ease)
      .delay(function(d,i){return i * 300})
      .duration(1000)
      .attr("r",function(d) { return d });
  </script>
</body>
</html>
```

## #12 eachを使ってみよう

`.each(...)`ではなく`.on(...)`を使う。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>D3.jsの練習</title>
</head>
<body>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-ease.v1.min.js"></script>
  <script>
    var dataset = [11,25,43,30,33];

    var w = 500;
    var h = 200;

    var svg = d3.select("body").append("svg").attr("width",w).attr("height",h);
    var ease = d3.easeBounceIn;

    svg.selectAll("circle")
      .data(dataset)
      .enter()
      .append("circle")
      .transition()
      .ease(ease)
      .delay(function(d,i){return i * 300})
      .duration(1000)
      .on("start",function() {
        d3.select(this).attr("fill","green").attr("r",0).attr("cy",h)
      })
      .attr("cx",function(d,i) { return 50 + (i * 100); })
      .attr("cy",h/2)
      .attr("r",function(d) { return d })
      .attr("fill","red")
      .on("end",function() {
        d3.select(this)
          .transition()
          .duration(800)
          .attr("fill","pink").attr("r",0).attr("cy",0)
      });
  </script>
</body>
</html>
```
## #13 onでイベントを設定してみよう

`.attr`を気をつける程度でv3とあまり変わらない。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>D3.jsの練習</title>
</head>
<body>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-ease.v1.min.js"></script>
  <script>
    var dataset = [11,25,43,30,33];

    var w = 500;
    var h = 200;

    var svg = d3.select("body").append("svg").attr("width",w).attr("height",h);
    var ease = d3.easeBounceIn;

    svg.selectAll("circle")
      .data(dataset)
      .enter()
      .append("circle")
      .on("mouseover",function(d) {
        d3.select(this).attr("fill","orange");
      })
      .on("mouseout",function(d){
        d3.select(this).attr("fill","red");
      })
      .on("click", function(d) {
        var rs = d3.select(this).attr("r");
        alert(rs);
      })
      .attr("cx",function(d,i) { return 50 + (i * 100); })
      .attr("cy",h/2)
      .attr("r",function(d) { return d })
      .attr("fill","red")
  </script>
</body>
</html>
```

## #14 横棒グラフを描画してみよう

13回と同じく。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>D3.jsの練習</title>
</head>
<body>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-ease.v1.min.js"></script>
  <script>
    var dataset = [11,25,43,30,33];

    var w = 500;
    var h = 200;

    var svg = d3.select("body").append("svg").attr("width",w).attr("height",h);
    var ease = d3.easeBounceIn;

    svg.selectAll("rect")
      .data(dataset)
      .enter()
      .append("rect")
      .attr("x",0)
      .attr("y",function(d,i){ return i * 25; })
      .attr("width",function(d){ return d; })
      .attr("height",20)
      .attr("fill","red")
  </script>
</body>
</html>
```

## #15 scaleを使ってみよう

`d3.scaleLinear()`を使う。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>D3.jsの練習</title>
</head>
<body>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-ease.v1.min.js"></script>
  <script>
    var dataset = [11,25,43,30,33];

    var w = 500;
    var h = 200;
    var xScale = d3.scaleLinear()
                    .domain([0,d3.max(dataset)])
                    .range([0,w])
                    .nice();

    var svg = d3.select("body").append("svg").attr("width",w).attr("height",h);
    var ease = d3.easeBounceIn;

    svg.selectAll("rect")
      .data(dataset)
      .enter()
      .append("rect")
      .attr("x",0)
      .attr("y",function(d,i){ return i * 25; })
      .attr("width",function(d){ return xScale(d); })
      .attr("height",20)
      .attr("fill","red")
  </script>
</body>
</html>
```

## #16 axisを使ってみよう (1)
[d3-axis](https://github.com/d3/d3-axis)を利用する。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>D3.jsの練習</title>
  <style>
    .axis path, axis line {
      fill: none;
      stroke: black;
    }
    .axis text{
      font-size: 11px;
    }
  </style>
</head>
<body>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-ease.v1.min.js"></script>
  <script src="https://d3js.org/d3-axis.v1.min.js"></script>
  <script>
    var dataset = [11,25,43,30,33];

    var w = 500;
    var h = 200;
    var xScale = d3.scaleLinear()
                    .domain([0,d3.max(dataset)])
                    .range([0,w])
                    .nice();

    var svg = d3.select("body").append("svg").attr("width",w).attr("height",h);

    var xAxis = d3.axisBottom(xScale);

    svg.append("g")
        .attr("class","axis")
        .attr("transform", "translate(0,180)")
        .call(xAxis);

    var ease = d3.easeBounceIn;

    svg.selectAll("rect")
      .data(dataset)
      .enter()
      .append("rect")
      .attr("x",0)
      .attr("y",function(d,i){ return i * 25; })
      .attr("width",function(d){ return xScale(d); })
      .attr("height",20)
      .attr("fill","red")
  </script>
</body>
</html>
```

## #17 axisを使ってみよう (2)
16回に同じく。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>D3.jsの練習</title>
  <style>
    .axis path, axis line {
      fill: none;
      stroke: black;
    }
    .axis text{
      font-size: 11px;
    }
  </style>
</head>
<body>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-ease.v1.min.js"></script>
  <script src="https://d3js.org/d3-axis.v1.min.js"></script>
  <script>
    var dataset = [11,25,43,30,33];

    var w = 500;
    var h = 200;
    var padding = 20;

    var xScale = d3.scaleLinear()
                    .domain([0,d3.max(dataset)])
                    .range([padding,w - padding])
                    .nice();

    var svg = d3.select("body").append("svg").attr("width",w).attr("height",h);

    var xAxis = d3.axisBottom(xScale);

    svg.append("g")
        .attr("class","axis")
        .attr("transform", "translate(0,180)")
        .call(xAxis);

    var ease = d3.easeBounceIn;

    svg.selectAll("rect")
      .data(dataset)
      .enter()
      .append("rect")
      .attr("x",padding)
      .attr("y",function(d,i){ return i * 25; })
      .attr("width",function(d){ return xScale(d) - padding; })
      .attr("height",20)
      .attr("fill","red")
  </script>
</body>
</html>

```

## さいごに

d3はリポジトリ毎にある`README.md`に色々情報が載っているので、分からない事があればそこを読めば良さそうです。https://github.com/d3