D3.jsで円グラフを作成する（アニメーション追加）

アニメーションに必要なメソッドの追加

前回、前々回の続き。最後にアニメーションを追加します。path要素に設定を行います。

// Path Setting
pieElement.append("path")
  .style("fill", function(d, i) {
    return colorSet(i);
  })
  .transition()
  .duration(settings.duration)
  .delay(function(d, i){
    return settings.delay * i;
  })
  .attr("d", arc);

$.fn.D3PieChart = function(options) {
  var defaults = {
    "data": [],
    "color": d3.schemeCategory10,
    "height": 250,
    "width": 250,
    "innerRadisu": 0,
    "outerRadisu": 100,
    "duration": 500,
    "delay": 500
  };

アニメーションを滑らかに動作させる

とりあえず円グラフの要素が時間に応じて順番に表示されるようになったのですが、滑らかに表示されるわけではありません。

これを滑らかに動作させるために、円グラフの座標の補間処理をさせる必要があります。

// Path Setting
pieElement.append("path")
  .style("fill", function(d, i) {
    return colorSet(i);
  })
  .transition()
  .duration(settings.duration)
  .delay(function(d, i){
    return settings.delay * i;
  })
  .attrTween("d", function (d) {
    var interpolate = d3.interpolate(
      {startAngle: d.startAngle, endAngle: d.startAngle},
      {startAngle: d.startAngle, endAngle: d.endAngle}
    );
    return function (t) {
      return arc(interpolate(t));
    }
  });

アニメーションの種類

d3.jsのversion4では、アニメーションの指定がversion3と異なります。こちらのサイトを参考にアニメーションの種類を設定します。

// Path Setting
pieElement.append("path")
  .style("fill", function(d, i) {
    return colorSet(i);
  })
  .transition()
  .duration(settings.duration)
  .delay(function(d, i){
    return settings.delay * i;
  })
  .ease(settings.ease)
  .attrTween("d", function (d) {
    var interpolate = d3.interpolate(
      {startAngle: d.startAngle, endAngle: d.startAngle},
      {startAngle: d.startAngle, endAngle: d.endAngle}
    );
    return function (t) {
      return arc(interpolate(t));
    }
  });

jQueryのパラメータ初期値設定は以下のようにセット。

$.fn.D3PieChart = function(options) {
  var defaults = {
    "data": [],
    "color": d3.schemeCategory10,
    "height": 250,
    "width": 250,
    "innerRadisu": 0,
    "outerRadisu": 100,
    "duration": 500,
    "delay": 500,
    "ease": d3.easeLinear
  };

easeパラメータにd3.easeLinearを初期値として設定しました。他のアニメーションの種類もあるので、アニメーションのオブジェクトを配列で管理して引数は数値を渡すようにしてみました。

var easing = [
  d3.easeElastic,
  d3.easeBounce,
  d3.easeLinear,
  d3.easeSin,
  d3.easeQuad,
  d3.easeCubic,
  d3.easePoly,
  d3.easeCircle,
  d3.easeExp,
  d3.easeBack
];

jQueryのパラメータ初期値も書き換え。

"ease": 2

最後にeaseメソッドの引数も変更。

.ease(easing[settings.ease])

これで動かすと……

できた！＼(^o^)／
gifアニメなのでカクカクしてますが、実際は滑らかに動いてくれます。

関連記事

• D3.jsで円グラフを作成する（jQueryでプラグイン化）
• D3.jsで円グラフを作成する（テキストの追加）
• D3.jsで円グラフを作成する（アニメーション追加）