LoginSignup
4
7

More than 5 years have passed since last update.

@toC

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

Posted at

ドットインストールにあるD3.js入門は、#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を使う。

<!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を利用する。

<!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(...)を使う。

<!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とあまり変わらない。

<!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回と同じく。

<!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()を使う。

<!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を利用する。

<!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回に同じく。

<!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

4
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
4
7