SELECTED ENTRIES
CATEGORIES
ARCHIVES
SPONSORED LINK
MOBILE
qrcode
LINKS
PROFILE
OTHERS

07
--
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
--
>>
<<
--

Agata's Blog

MATLABやPythonとともにD3.jsを使ってデータ解析とデータビジュアライゼーションに挑戦する某エンジニアのBlog
<< グラフにグリッド線を追加する | main | 過去30日間に世界で発生した地震を可視化する >>
折れ線グラフをアニメーションで表示する
0
    JUGEMテーマ:JavaScript

    前回作成したグラフですが、せっかくなので表示に動きをつけてみます。散布図をアニメーションで表示する方法については以前このブログで取り上げました。今回は、折れ線グラフをアニメーションで表示する方法を紹介します。

    D3.js を使った折れ線グラフの作成では、まず d3.svg.line() メソッドを使って path を生成します (詳しくは以前の記事を参照)。この path をアニメーションで表示させるには、stroke-dasharray と stroke-dashoffset という、2種類のプロパティを操作します。前者の stroke-dasharray プロパティを使うと、パスを破線で描画するときの線と間隙の長さを指定することができます。また後者の stroke-dashoffset プロパティは、破線が表示される開始位置を指定することができます。このあたり、言葉で説明してもなかなか分かりにくいので、下記の図を参考にして下さい。



    サンプルページとプログラムは下記の通りです。まず、40行目では getTotalLength() メソッドを使って、27〜37行目で作成した path の長さを取得しています。そのうえで、43〜48行目の部分で、上記2種類のプロパティを操作して、4秒かけてこのパスを表示しています。

    サンプルページ

    var dataSet = [];
    
    // X,Y軸を表示できるようにグラフの周囲にマージンを確保する
    var margin = {top: 40, right: 40, bottom: 40, left: 100};
    var width = 800 - margin.left - margin.right;
    var height = 500 - margin.top - margin.bottom;
    
    d3.csv("./js/WorldPopulation.csv", function(error, dataSet){
    
      // SVGの表示領域を生成
      var svg = d3.select("#MyGraph")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + ", " + margin.top + ")");
        
      // スケール関数を作成。
      var xScale = d3.scale.linear()
        .domain([1000,2200])
        .range([0,width]);
    
      var yScale = d3.scale.log()
        .domain([0.1,10])
        .range([height,0]);
    
      // 折れ線グラフを生成
      var line = d3.svg.line()
        .x(function(d,i){
          return xScale(d.Year);
        })
        .y(function(d,i){
          return yScale(d.Population);      
        });
    
      var path = svg.append("path")
        .attr("class", "line")
        .attr("d", line(dataSet));
      
      // パスの長さを取得
      var pathLength = path.node().getTotalLength();
      
      // "stroke-dasharray" と "stroke-dashoffset" を使ってパスをアニメーションで描画
      path.attr("stroke-dasharray", pathLength + " " + pathLength)
        .attr("stroke-dashoffset", pathLength)
        .transition()
        .duration(4000)
        .ease("linear")
        .attr("stroke-dashoffset", 0);
          
      // 散布図を描画
      svg.selectAll("circle")
        .data(dataSet)
        .enter()
        .append("circle")
        .attr("r", 0)
        .attr("cx", function(d){
          return xScale(d.Year);
        })
        .attr("cy", function(d){
          return yScale(d.Population);
        })
        .attr("fill","orange")
        .transition()
        .delay(function(d,i){
          return 2000+(i*100);
        })
        .attr("r", 5);
    
      // Y軸を描画
      svg.append("g")
        .attr("class", "axis")
        .call(d3.svg
          .axis()
          .scale(yScale)
          .orient("left")
          .tickValues([0.1,0.2,0.4,0.6,0.8,1,2,4,6,8,10])
          .tickPadding(10) // 軸と数値の間のスペースを指定
          .tickFormat(d3.format(".1f"))
      );
      
      // Y軸のグリッドを描画
      svg.append("g")
        .attr("class", "axis")
        .call(d3.svg
          .axis()
          .scale(yScale)
          .orient("left")
          .innerTickSize(-width)
          .tickFormat("")
      );
    
      // X軸を描画
      svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.svg
          .axis()
          .scale(xScale)
          .orient("bottom")
          .innerTickSize(-height) // X軸のグリッドを描画
          .tickPadding(10) // 軸と数値の間のスペースを指定
          .tickFormat(function(d){return d;})
      );
      
      // 凡例
      svg.append("g")
        .attr("class", "axis")
        .append("text")
        .attr("x", -40)
        .attr("y", -20)
        .text("[単位: 10億人]");
    
      svg.append("g")
        .attr("class", "axis")
        .append("text")
        .attr("x", width/2)
        .attr("y", margin.top + height)
        .text("Year");
    
    })
    
    

     
    このエントリーをはてなブックマークに追加
    | D3.js | 22:00 | comments(0) | - | - |
    スポンサーリンク