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 | 折れ線グラフをアニメーションで表示する >>
グラフにグリッド線を追加する
0
    D3.js でグリッド線を追加する方法はいくつかありますが、今回はいちばん簡単な方法を紹介します。

    それでは前回作成したグラフにグリッド線を追加してみましょう。まず、html ファイルの <style>〜</style> タグ内 (CSS) に以下を追加します。

      .tick line{
        opacity: 0.2;
      }

    次に、軸の目盛り線の長さを指定する innerTickSize() メソッドでマイナスの値を指定して、目盛り線をグラフの内側に伸ばしてしまいます。内側に伸ばす線の長さをグラフのサイズにすることで、グラフのグリッド線にしてしまうというわけです。

    軸の描画とグリッド線の描画を分けることで、軸の目盛り用に表示する数値の数とグリッド線の数とを個別に指定することもできます。今回の例では、Y軸に対して軸の描画 (54行目〜63行目) とグリッド線の描画 (66行目〜74行目) を個別に指定しています。

    軸の目盛り用に表示する数値の数とグリッド線の数とが一致する場合には、軸の描画とグリッド線の描画を同時にすることができます。今回の例では、X軸に対してこれらを同時に実行しています (78行目〜88行目)。

    サンプルページ



    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);      
        });
    
      // 折れ線グラフを生成
      svg.append("path")
        .attr("class", "line")
        .attr("d", line(dataSet));
        
      // 散布図を描画
      svg.selectAll("circle")
        .data(dataSet)
        .enter()
        .append("circle")
        .attr("r", 5)
        .attr("cx", function(d){
          return xScale(d.Year);
        })
        .attr("cy", function(d){
          return yScale(d.Population);
        })
        .attr("fill","orange");
    
      // 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 | 11:08 | comments(0) | - | - |
    スポンサーリンク