やりたいこと：Heatmapチャートにある軸のラインと目盛を非表示にしたいです

• d3.axisでHeatmapチャートの軸を作成しました
• Heatmapチャートにある軸のラインと目盛の必要はない（あったら害はないですが、ちょっと不自然）ので、非表示したいです
  

解決１：cssで軸のライン（path）と目盛（line）を非表示

• d3.axisで作成した軸にライン（path）と各目盛（line）エレメントがあります
  
• x/y軸のラインのエレメントは「path」、各目盛のエレメントは「line」なので、cssでこれを非表示します

  .axis path, .axis line{
    display: none ;
  }

解決２：d3のセレクトで軸のライン/目盛を消去（remove）します

• d3で軸のラインエレメント（path）、目盛のエレメント（line）を選択して、消去（remove）します

  svg.select(".x.axis path").remove();
  svg.select(".y.axis path").remove();

軸の外側にある目盛文字をチャートと距離調整（tickSizeInner）

• 軸のライン/目盛が非表示したので、目盛の文言がチャートとの間の隙間が広がることがあります。これをd3.axisのプロパティ（tickSizeInner）で調整したほうが良いでしょう
• d3.axisに「tickSizeInner」プロパティがあります、その値（例：0）を調整すればよいです

  var xAxis = d3.axisBottom(xScale).tickSizeInner(0);
  var yAxis = d3.axisLeft(yScale).tickSizeInner(0) ;

データセットの日付/時間のフォーマットがチャートで表示するフォーマットが違うことが多い

• 時系列のデータセットにある日付/時間のフォーマットがデータ抽出ロジックに左右され、いろいろなフォーマットがあります

  // 例：時系列のデータセット
  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},
  ] ;

   

• 実際にチャートの軸の日付フォーマットがデータセットのものと違うことが多いです
  

d3-time-formatモジュールが日付フォーマット変換に関する様々な機能を提供しています

• 日付、曜日、時間などのフォーマット定義関数： d3.timeFormat()

  var formatTime = d3.timeFormat("%Y-%-m-%e");
  formatTime(new Date); // "2017-10-25"

  「%」記号で日付、時間のフォーマットを決める

• 日付、曜日、時間などフォーマット変換： d3.timeParse()

  var parseTime = d3.timeParse("%Y-%m-%e");
  parseTime("2017-10-25"); // Sun Oct 25 2015 00:00:00 GMT+0900 (Japan Standard Time)

   

• 日付/時間関連のフォーマット一覧
  • %a - 曜日の略称
  • %A - 曜日の全称
  • %b - 月の略称
  • %B - 月の全称
  • %c - ローカル環境の日付と時間、例：10/25/2017, 9:41:57 PM
  • %d - ゼロ付きの日、月の数字 [01,31].
  • %e - 空白付きの日、月の数字 [ 1,31];  %_d と同じ.
  • %f - マイクロ秒の数字 [000000, 999999].
  • %H - 24時間制の時間 [00,23].
  • %I - 12時間制の時間 [01,12].
  • %j - 一年間にその日の番号 [001,366].
  • %m - 月に数字 [01,12].
  • %M - 分の数字 [00,59].
  • %L - ミニ秒の数字 [000, 999].
  • %p - AM or PM.
  • %Q - UNIXのマイクロ秒
  • %s - UNIXの秒
  • %S - 秒の数字 [00,61].
  • %u - 月曜日スタート (ISO 8601) の曜日番号 [1,7].
  • %w - 日曜日スタートの曜日番号 [0,6].
  • %U - 一年に日曜日スタートの曜日番号 [00,53].
  • %W - 一年に月曜日スタートの曜日番号 [00,53].
  • %V - ISO 8601 基準の一年に曜日の番号 [01, 53].
  • %x - ローカル環境の日付 （%-m/%-d/%Y と同じ）　
  • %X - ローカル環境の時間（ %-I:%M:%S %p と同じ）
  • %y - 2桁年の数字 [00,99].
  • %Y - 4桁年の数字
  • %Z - タイムゾーン（例： -0700, -07:00, -07, or Z.）
  • %% - %記号のエスケープ

時系列の軸がスケール（d3.scaleTime）に日付フォーマットの使用

• 時系列の軸（d3.axis）に、d3.scaleTime()をよく利用します

  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 } ;
    } );
  // 時系列のスケール（scaleTime）利用
  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]);
  // 時系列の軸が時系列のスケールを呼び出し
  d3.axisBottom(x_scale).tickFormat(d3.timeFormat("%m/%e")) // 例：1/1、1/2 のフォーマット

   

• 上記例では、データセットの日付を標準日付へ、軸の目盛フォーマットへの変換（つまり、標準の日付がなければ、軸の目盛の日付フォーマット変換はできません）