メインコンテンツに移動
ホーム

古松

メインナビゲーション

  • ホーム
  • ビデオ
  • ご連絡

パンくず

  • ホーム
  • d3.jsのチャート軸(d3.axis)の作成及び軸目盛間隔調整

d3.jsのチャート軸(d3.axis)の作成及び軸目盛間隔調整

d3.jsのチャート(例:バーチャート、折れ線チャートなど)の軸を作成

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

d3.scaleのドメイン(Input)とレンジ(Output)を利用して軸のサイズ、目盛を決めます

  • d3.scale(例:d3.scaleBand、d3.scaleTimeなど)を利用して、軸のサイズ、目盛、目盛の間隔を調整します
    var data_set = [
    	    "1月1日",
            "1月2日",
            "1月3日",
            "1月4日",
            "1月5日",
            "1月6日",
            "1月7日",
            "1月8日",
            "1月9日",
            "1月10日",
            "1月11日",
            "1月12日"] ;
    
    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個が表示されています

     

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

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

  • 軸の入力値調整メソッド:tickValuesを利用して、目盛の調整を行ったほうが確実にできます
    var data_set = [
    	    "1月1日",
            "1月2日",
            "1月3日",
            "1月4日",
            "1月5日",
            "1月6日",
            "1月7日",
            "1月8日",
            "1月9日",
            "1月10日",
            "1月11日",
            "1月12日"] ;
    var xAsis = d3.axisBottom()
    	.scale(x_scale)
    	.tickValues( data_set.filter( function(d,i){ return !(i % 2); })) //奇数の目盛値の配列要素使用
        ;
    

     

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

d3.jsのx/y軸のラインと目盛を非表示する方法

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

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

解決1:cssで軸のライン(path)と目盛(line)を非表示

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

解決2: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) ;

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},
    ] ;

     

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

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 のフォーマット

     

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

検索フォーム

カテゴリ別

  • laravel
  • drupal
  • javascript
  • windows
  • html
  • mysql
  • php
  • apache
  • css
  • SEO
  • video
  • wordpress
  • linux
  • python
  • Electron
  • Visual Studio Code

google ads