SELECTED ENTRIES
CATEGORIES
ARCHIVES
SPONSORED LINK
MOBILE
qrcode
LINKS
PROFILE
OTHERS

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

Agata's Blog

Python+pandasとD3.jsを使ってデータ解析とデータビジュアライゼーションに挑戦する某エンジニアのBlog
<< D3.jsを使ったゲーム | main | D3.jsによる折れ線グラフの描画 >>
棒グラフに数値を表示させる
0
    JUGEMテーマ:JavaScript

    SVGでは円や四角形だけでなく、テキストも図の構成要素として扱うことができます。そこで今回は、これまでに作成した棒グラフにデータを数値として表示させることにしましょう。

    ■sample.js
    // テストデータ
    var testData = [30, 100, 320, 150];
    
    // 棒グラフを作成
    d3.select("#MyGraph")
      .selectAll("rect")
      .data(testData)
      .enter()
      .append("rect")
      .attr("x", 10)
      .attr("y", function(d,i){
        return i*25;
      })
      .style("fill", "blue")
      .attr("height", "20px")
      .attr("width", function(d,i){
        return d+"px";
      });
    
    // 棒グラフの右隣に数値を表示
    d3.select("#MyGraph")
      .selectAll("text")
      .data(testData)
      .enter()
      .append("text")
      .attr("x", function(d,i){
        return d+15;
      })
      .attr("y", function(d,i){
        return i*25+15;
      })
      .text(function(d,i){
        return d;
      });
    
    // 軸を作成
    var xScale = d3.scale.linear()
      .domain([0, 350])
      .range([0, 350]);
     
    d3.select("#MyGraph")
      .append("g")
      .attr("class", "axis")
      .attr("transform", "translate(10, "+((1+testData.length)*20+5)+")")
      .call(d3.svg.axis()
        .scale(xScale)
        .orient("bottom")
      )
    

    そろそろプログラムも長くなってきたので、分かりやすくするためにプログラムを適度に区切って、コメントを加えました。まず1行目から18行目までは、以前解説した棒グラフを作成する部分ですね。36行目から47行目は軸を作成するためのプログラムです。ここまでは、これまでのおさらいです。

    今回追加した部分は、20行目から34行目の部分です。それでは順番に見てゆきましょう。

    まず21行目は、ID名「MyGraph」のSVG要素を選択するという、おなじみの1行ですね。つづく22行目は、selectAll()メソッドを使って、後から追加するtext要素をセレクトしています。つづいてテストデータを読み込んだうえで、25行目でappend()メソッドを使ってテキスト要素をSVGに追加しています。

    今回のポイントは26行目から34行目、テキストの表示位置と表示内容を決める部分です。まず26行目から28行目では、テキストが各棒グラフの右側に表示されるように、x座標を棒の長さ+15 pxの位置としています。続く29行目から31行目では、各棒グラフの高さ分づつ表示位置がずれるようにy座標を決めています。最後に32行目から34行目の部分で、配列testDataのそれぞれの要素をテキストとして表示しています。

    D3.jsの入門として、棒グラフを作りながらいろいろと勉強してきました。次回はいよいよ、他のタイプのグラフも作ってみることにしましょう!
     
    このエントリーをはてなブックマークに追加
    | D3.js | 21:21 | comments(0) | - | - |
    スポンサーリンク