d3の基本：チャート凡例（legend）の作成方法

凡例（legend）が横方向/縦方向があります

• チャートに色が付けた場合、識別するため凡例（legend）が必要となります
• 凡例は横方向と縦方向があります
• バーチャートなどは横方向の凡例は自然的でしょう
  
• 縦方向の凡例がチャートと重複しやすいです
  

縦方向の凡例作成は比較的に簡単

• d3.jsがSVG領域でチャートを描画するため、x/y、width/heightで描画場所を決めるため、縦方向の凡例は比較簡単に作成できます
• 凡例表示する座標（x）が固定で、（y）を一定の間隔で指定すればよいです

  // 凡例名所
  var legendVals = ["Queens", "Kings", "Bronx", "Manhatan","Richmond"] ;
  // 凡例の色（d3の10色作成）
  var color = d3.scale.category10()
  
  var svgLegned = d3.select(".legend-div").append("svg");  // 描画svg作成
    
  var legend = svgLegned.selectAll('.legends')　// 凡例の領域作成
  	.data(legendVals)
  	.enter()
          .append('g')
  	.attr("class", "legends")
  	.attr("transform", function (d, i) {
                       {
                            return "translate(0," + i * 20 + ")" // 各凡例をy方向に20px間隔で移動
                       }
  		});
  
  legend.append('rect') // 凡例の色付け四角
  	.attr("x", 0)
  	.attr("y", 0)
  	.attr("width", 10)
  	.attr("height", 10)
  	.style("fill", function (d, i) { return color(i); }) // 色付け
  
  legend.append('text')  // 凡例の文言
  	.attr("x", 20)
  	.attr("y", 10)
      .text(function (d, i) {	return d ; })
  	.attr("class", "textselected")
  	.style("text-anchor", "start")
  	.style("font-size", 15)
    ;

• 描画結果は以下のようです
  

横方向凡例は各凡例説明文のwidth取得（svgのgetBBoxメソッド）が必要

• 凡例の説明文言の文字数、横幅（width）が違うことが多いため、横幅（width）の取得が必要です
  • svgがcssのmargin, paddingプロパティが利かないです
  • 横幅（width）の元で、次の凡例開始位置（x）の計算が必要です
• svgでは描画した内容の横幅（width）取得するメソッド：getBBox()があります

  var legendVals = ["Queens", "Kings", "Bronx", "Manhatan","Richmond"] ;
  var color = d3.scale.category10()
  
   
  var legend = d3.select(".legend-div")
  	.append("svg")
    .attr("width", 500)
    .attr("height", 50)
    .selectAll('g')
  	.data(legendVals)
  	.enter()
    .append('g')
  	.attr("class", "legends")
  	;
  
  legend.append('rect') // 凡例の色付け四角
  	.attr("x", 0)
  	.attr("y", 10)
  	.attr("width", 10)
  	.attr("height", 10)
  	.style("fill", function (d, i) { return color(i); }) // 色付け
  
  legend.append('text')  // 凡例の文言
  	.attr("x", 20)
  	.attr("y", 20)
  	.text(function (d, i) {	return d ; })
  	.attr("class", "textselected")
  	.style("text-anchor", "start")
  	.style("font-size", 15)
    ;
    
  var padding = 20 ;  
  legend.attr("transform", function (d, i) {
            {
              return "translate("+(d3.sum(legendVals, function(e,j) {
      					if (j < i) { 
                	return legend[0][j].getBBox().width;   // 各凡例の横幅サイズ取得
                } else {
                	return 0; 
                  } 
                }) + padding * i) + ",0)";
            }
  	});  

• 凡例の描画結果は以下のようです
  

d3.jsのチャート（例：バーチャート、折れ線チャートなど）の軸を作成

• d3.jsでは、チャート（例：バーチャート、折れ線チャートなど）を作成時に、x/y軸が別部品なので、チャートと別に作成する必要はあります
• d3.jsでは、基本的にx/y軸を中心にしています
  • x軸： d3.axisTop(目盛は軸の上に表示)、d3.axisBottom（目盛は軸の下に表示）
  • y軸： d3.axisLeft（目盛は軸の左側に表示）、d3.axisRight（目盛は軸の右側に表示）
    

ｄ３.ｓｃａｌｅのドメイン（Ｉｎｐｕｔ）とレンジ（Ｏｕｔｐｕｔ）を利用して軸のサイズ、目盛を決めます

• d3.scale（例：d3.scaleBand、d3.scaleTimeなど）を利用して、軸のサイズ、目盛、目盛の間隔を調整します

  var data_set = [
  	    "１月１日",
          "１月２日",
          "１月３日",
          "１月４日",
          "１月５日",
          "１月６日",
          "１月７日",
          "１月８日",
          "１月９日",
          "１月１０日",
          "１月１１日",
          "１月１２日"] ;
  
  var x_scale = d3.scaleBand()
  	.domain(data_set)
  	.range([0,  800])
    ;
  var xAsis = d3.axisBottom()
  	.scale(x_scale)
  	.tickValues( x_scale.domain().filter(function(d,i){ return !(i % 2); }) )
      ;
  
  d3.select("#content-svg")
  	.append("g")
  	.attr("transform", "translate(10, 40)")
   	.call(xAsis)

   

使用できないd3.scaleのタイプ（d3.scaleLinear, d3.scaleOriental）があります

• 軸の作成にすべてのd3.scaleタイプが適応することはありません
• 例：上記例ではd3.scaleLinear, d3.scaleOrientalを使用すると、軸の描画は行いません

  var x_scale = d3.scaleLinear()
  	.domain(data_set)
  	.range([0,  800])
    ;
  var xAsis = d3.axisBottom()
  	.scale(x_scale)
  	.tickValues(x_scale.domain().filter(function(d,i){ return !(i % 2); }))
      ;
  
  // 結果として、軸が描画されますが、目盛は表示されません
  d3.select("#content-svg")
  	.append("g")
  	.attr("transform", "translate(10, 40)")
   	.call(xAsis);
  

   

• これは各種タイプd3.scaleの性質が違うからでした
  • d3.scaleLinearは連続入力（入力範囲だけ、不特定な値を入力）にたいして、本例では決まった12個の値の配列だけに適応しません
• どのd3.scaleタイプを利用するかは、入力と出力を考慮して使用すべきです

d3.axisの目盛間隔メソッド（ticks）の機能しない場合があります

• 目盛の間隔を調整するメソッド：ticksがありますが、上記例では機能しません

  var xAsis = d3.axisBottom()
  		.scale(x_scale)
  		.ticks( 6 )  // メモリを六つ表示させたい
  		;
  // 結果は六つではなく、12個が表示されています

   

• いろいろな紹介を調べてみたら、目盛要素の２，５，１０倍数のみに有効との説がありますが、上記例に試してみたが、機能はしません

d3.axisのtickValuesメソッドでメモリ間隔調整を確実に

• 軸の入力値調整メソッド：tickValuesを利用して、目盛の調整を行ったほうが確実にできます

  var data_set = [
  	    "１月１日",
          "１月２日",
          "１月３日",
          "１月４日",
          "１月５日",
          "１月６日",
          "１月７日",
          "１月８日",
          "１月９日",
          "１月１０日",
          "１月１１日",
          "１月１２日"] ;
  var xAsis = d3.axisBottom()
  	.scale(x_scale)
  	.tickValues( data_set.filter( function(d,i){ return !(i % 2); })) //奇数の目盛値の配列要素使用
      ;
  

   

• 時間、日付の場合、d3.scaleTimeで作成したほうが調整しやすいです

d3.jsのSVGの折れ線チャートを作成

• d3.jsで簡単に折れ線チャート作成ができます
  

ポイント１：d3.line()でデータセットをSVGのpathプロパティ（d）への変換

• d3.jsにd3.line関数があります。d3.lineよりデータセットから直接にSVG描画のpathのプロパティ（d）への変換ができます

  //　折れ線チャート描画のデータセット
  var data_set = [
  		{date:"2017-1-1", val:16},
  		{date:"2017-1-2", val:6},
  		{date:"2017-1-3", val:1},
  		{date:"2017-1-4", val:5},
  		{date:"2017-1-5", val:26},
  		{date:"2017-1-6", val:36},
  		{date:"2017-1-7", val:10},
  		{date:"2017-1-8", val:8},
  		{date:"2017-1-9", val:21},
  		{date:"2017-1-10", val:26},
  		{date:"2017-1-11", val:19},
  		{date:"2017-1-12", val:20},
  ] ;
  
  // SVGのpathプロパティ（d）への変換
  var valueline = d3.line()
      .x(function(d) { return x_scale(d.date); })  // x軸のデータ
      .y(function(d) { return y_scale(d.val); })    // y軸のデータ
      ;
  console.log(valueline(data_set)); // SVGのpathプロパティ（d）の確認
  // 結果： M0,111.11111111111111L45.45454545454545,166.66666666666669L90.9090909090909,194.44444444444446L136.36363636363635,172.22222222222223L181.8181818181818,55.55555555555557L227.27272727272725,0L272.7272727272727,144.44444444444446L318.1818181818182,155.55555555555554L363.6363636363636,83.33333333333333L409.0909090909091,55.55555555555557L454.5454545454545,94.44444444444444L500,88.88888888888889
  

   

ポイント２：SVGのpathにデータバインディング時にdeta()メソッドではなくdatum()を使用します

• d3.jsが描画要素追加して、各要素にデータをバインディングするときによくdeta()メソッドを使用します
  • これは複数の描画要素にデータ配列をスライスして各要素に一つデータをバインディングします
• 今回は、作成されたSVGのpathプロパティ（d）のデータが一つだけで、datum()メソッドを利用して、作成したpathにデータをバインディングします
  • data()とdatum()の違いについて、「d3.jsの基本２：data()が複数のエレメント作成して一つの配列値をバインディングに対して, datum()が単一のエレメント作成して全データの値をバインディング 」をご参考
• 折れ線チャート描画のデータバインディング方法

  line_svg.append( "path" )
    .attr("transform", "translate(40, 20)")
    .datum(data_set)         // データのバインディング
    .attr("d", valueline)       // 設定されたd3.line() を渡す
    .attr("fill","none")
    .attr("stroke", "steelblue")
    .attr("stroke-width", 2)
  ;

   

ポイント３：x軸（日付）作成するにはd3.scaleTimeを使用

• 今回のデータセットに、特定な日付セットがあります
  • 通常、特定な入力に対して、d3.scaleBand()を使用しますが、x軸作成時に少しずれが生じますので、使用しません
• d3.scaleTime()のドメインに日付の最大値、最小値をセットして、x軸のフォーマット（axis.tickFormat()）で日付表示フォーマットを変更します

  var x_scale = d3.scaleTime()
  	.domain( [ d3.min(data_set.map( function(d){return d.date;} ) ),      // 日付の最小値
                 d3.max(data_set.map( function(d){return d.date;} ) ) ] )  // 日付の最大値
  	.range([0, width]);
  
  line_svg.append("g")
  	.attr("transform", "translate(40,"+(height+20)+")")
  	.call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e")))  // 日付のフォーマット変換
    ;

  時間/日付のフォーマットに関して「d3.jsの日付時間の扱いおよびフォーマットの変換 」をご参考

通常のチャート作成方法で折れ線チャートを作成

• 上記ポイントを押さえて、通常のd3.jsチャート作成方法で折れ線チャートを作成します

  var data_set = [
  		{date:"2017-1-1", val:16},
  		{date:"2017-1-2", val:6},
  		{date:"2017-1-3", val:1},
  		{date:"2017-1-4", val:5},
  		{date:"2017-1-5", val:26},
  		{date:"2017-1-6", val:36},
  		{date:"2017-1-7", val:10},
  		{date:"2017-1-8", val:8},
  		{date:"2017-1-9", val:21},
  		{date:"2017-1-10", val:26},
  		{date:"2017-1-11", val:19},
  		{date:"2017-1-12", val:20},
  ] ;
  
  var timeparser = d3.timeParse("%Y-%m-%e");
  data_set = data_set.map( function(d){ 
  		return  { date: timeparser(d.date), val:d.val } ;
    } );
  
  var width=500, height=200 ;
  var x_scale = d3.scaleTime()
  	.domain( [ d3.min(data_set.map( function(d){return d.date;} ) ), d3.max(data_set.map( function(d){return d.date;} ) )] )
  	.range([0, width]);
    
  var y_scale = d3.scaleLinear()
  	.domain([0, d3.max( data_set.map(function(d) {return d.val; }) ) ])
  	.range([height, 0]);
  
  var valueline = d3.line()
      .x(function(d) { return x_scale(d.date); })
      .y(function(d) { return y_scale(d.val); })
      ;
  
  var line_svg = d3.select("body")
  	.append("svg")
    .attr("width", 800)
    .attr("height", 300)
    ;
  line_svg.append( "path" )
    .attr("transform", "translate(40, 20)")
    .datum(data_set)
    .attr("d", valueline)
    .attr("fill","none")
    .attr("stroke", "steelblue")
    .attr("stroke-width", 2)
  ;
  line_svg.append("g")
  	.attr("transform", "translate(40,"+(height+20)+")")
  	.call(d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e")))
    ;
  line_svg.append("g")
  	.attr("transform", "translate(40,20)")
  	.call(d3.axisLeft(y_scale))
    ;