JavaScript
d3.js

D3.js ドットインストールはV3だけどV4でやってみた

はじめに

D3.jsを始めたい。v4ではじめたい。

ドットインストールをやろう。

V3!!

D3.js入門 (全17回)
をv4でやりながら、 つまずいた点をまとめて行きます!

#04 styleを設定してみよう

Styleを複数に適用した場合に生じる問題

before.html.erb
<p>hello!</p>

<script>
  p = d3.select("body").selectAll("p")
  p.text("hello from D3!!")
    .style({
      "font-size": "28px",
      "font-weight": "bold"
    })
</script>         

これではstyleが適用されません。

d3.selectAll to change styles by class in v4

In order to pass an object with multiple values, you have to use attrs and styles instead of attr and style and also include https://d3js.org/d3-selection-multi.v0.4.min.js file in your web page.

追記します。

app/views/layouts/application.html.erb
 <%= javascript_include_tag src="https://d3js.org/d3.v4.min.js" %>
 <%= javascript_include_tag src= "https://d3js.org/d3-selection-multi.v0.4.min.js" %>

style => styles

before.html.erb
<p>hello!</p>

<script>
  p = d3.select("body").selectAll("p")
  p.text("hello from D3!!")
    .styles({
      "font-size": "28px",
      "font-weight": "bold"
    })
</script>  

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

4と同じ問題

attr => attrs
変更後のコードは以下の通りになります。

after.html.erb
<script>

  var datasest = [11, 25, 45, 30, 33];
  var w = 500;
  var h = 200;

  var svg = d3.select("body").append("svg").attrs({width: w, height: h});

  svg.selectAll("circle")
    .data(datasest)
    .enter()
    .append("circle")
    .attrs({
      cx: function(d, i) {return 50 + (i * 100); },
      cy: h/2,
      r: function(d) {return d;},
      fill: "red"
  });
</script>

#11 transitionを使ってみよう

ease()が動かない。

以下のように変更があったみたいです。
ease("bounce") => ease(d3.easeBounce)

他の引数としては以下のものがあるみたいです。
実際の動きはこちらを参照して下さい。

easeElastic
easeBounce
easeLinear
easeSin
easeQuad
easeCubic
easePoly
easeCircle
easeExp
easeBack

v4でも動くコードはこんな感じになります。

after.html.erb
<script>

  var datasest = [11, 25, 45, 30, 33];

  var w = 500;
  var h = 200;

  var svg = d3.select("body").append("svg").attrs({width: w, height: h});

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

#12 eachを使ってみよう

eachは使えない

v4ではeachではなくonを使います。

尚、次の章"#13 onでイベントを設定しよう"では、onのイベント?であるmouseover,mouseout,clickなどが紹介されます。

GitHub

<script>
  var datasest = [11, 25, 45, 30, 33];
  var w = 500;
  var h = 200;

  var svg = d3.select("body").append("svg").attrs({width: w, height: h});

  svg.selectAll("circle")
    .data(datasest)
    .enter()
    .append("circle")
    .transition()
    .delay(function(d,i){
      return i * 300;
    })
    .duration(5000)
    .ease(d3.easeBounce)
    .on("start", function(){
        d3.select(this).attrs({
          fill: "green",
          r: 0,
          cy: h
        });    
    })
    .attrs({
      cx: function(d, i) {return 50 + (i * 100); },
      cy: h/2,
      r: function(d) { return d; },
      fill: "red"
    })
    .on("end", function(){
        d3.select(this)
        .transition()
        .duration(800)
        .attrs({
          fill: "pink",
          r: 0,
          cy: 0
        });
    });     
</script>

#15 scaleを使ってみよう

d3.scale.linear()は使えない

d3.scale.linear => d3.scaleLinear
に変更すれば、v4でも動きます。

GitHub

d3.scale.linear ↦ d3.scaleLinear
d3.scale.sqrt ↦ d3.scaleSqrt
d3.scale.pow ↦ d3.scalePow
d3.scale.log ↦ d3.scaleLog
d3.scale.quantize ↦ d3.scaleQuantize
d3.scale.threshold ↦ d3.scaleThreshold
d3.scale.quantile ↦ d3.scaleQuantile
d3.scale.identity ↦ d3.scaleIdentity
d3.scale.ordinal ↦ d3.scaleOrdinal
d3.time.scale ↦ d3.scaleTime
d3.time.scale.utc ↦ d3.scaleUtc

#16 axisを使ってみよう (1)

d3.svg.axisは使えない

GitHub

In place of d3.svg.axis and axis.orient, D3 4.0 now provides four constructors for each orientation: d3.axisTop, d3.axisRight, d3.axisBottom, d3.axisLeft.

以下のように変更します

before.html.erb
 var xAxis = d3.svg.axis()
               .scale(xScale)
               .orient("bottom");

⇓ change!

after.html.erb
var xAxis = d3.axisBottom(xScale);

おわりに

ドットインストールはは本当によくできた学習サイトだと改めて実感しました。
ところで、近々、v3時代のD3関連書籍の新板がでるそうです。
Dメンのみんなは、Check it out!!

Interactive Data Visualization for the Web: An Introduction to Designing With D3 (英語) ペーパーバック – 2017/8/25

D3.js in Action: Data Visualization With Javascript (英語) ペーパーバック – 2017/8/30