D3.jsで折れ線グラフ表示　時間軸について

D3.jsにてcsvファイルから折れ線グラフを表示しています。

時間軸をcsvで保存した一番古い時間”%H:%M”をX軸とY軸の交点に、
csvで保存した最新の時間”%H:%M”をX軸の最終座標軸に表示したいのですが、
ラベル表示が上手くいきません。

d3.csv(myFile1, function(error, data){
			var dataSet = [ ];							// データを格納する配列変数
			for(var i=0; i<data.length; i++){			// データの行数分だけ繰り返す
				dataSet.push(data[i].item2);			// item2のラベルのデータだけを抽出

			}
------------------
グラフ表示(データ部)
プログラム割愛
------------------

	var date_Min = d3.min(dataSet);
	var date_Max = d3.max(dataSet);
							
	console.log(date_Min);
	console.log(date_Max);
						
	//横方向の目盛を表示
	var formatDate = d3.time.format( "%H:%M" );
	var xScale = d3.time.scale()		//スケールを設定
		.domain([new Date("2016/08/01" + date_Min), new Date("2016/08/01"+ date_Max)])
		.range([0,svgWidth])			//出力サイズ
						
						
	//横方向の線を表示する
	d3.select("#myGraph")
		.append("g")					//rect要素を追加
		.attr("class", "axis_x")		//CSSクラスを指定
		.attr("transform", "translate("+offsetX+", "+(svgHeight -offsetY)+")")		//線の横幅を指定
		.call(
			d3.svg.axis()
			.scale(xScale)
			.orient("bottom") // 値を軸の下側に表示
			.ticks(8) // 目盛りの個数を提案
			.tickFormat(formatDate)//{
		//	var fmtFunc = d3.time.format("%H:%M");
		//	return fmtFunc(d);
			//})
		)
	}
						
	
})

一番古い時間及び最新の時間をコンソール画面にLogとして表示してみたところ、csvデータの内容と一致しているのですが、ソースコードが間違いがあるのかエラーにならずグラフが表示がされます。
表示されるグラフは、X軸は表示されラベルが表示されません。

dateSetの中身(最終部割愛)
["16:16:03", "16:17:03", "16:18:03", "16:19:03", "16:20:03", "16:21:03", "16:22:03", "16:23:03", "16:24:03", "16:25:03", "16:26:03", "16:27:03", "16:28:03", "16:29:03", "16:30:03", "16:31:03", "16:32:03", "16:33:03", "16:34:03", "16:35:03", "16:36:03", "16:37:03", "16:38:03", "16:39:03", "16:40:03", "16:41:03", "16:42:03", "16:43:03", "16:44:03", "16:45:03", "16:46:03", "16:47:03", "16:48:03", "16:49:03", "16:50:03", "16:51:03", "16:52:03", "16:53:03", "16:54:03", "16:55:03", "16:56:03", "16:57:03", "16:58:03", "16:59:03", "17:00:03", "17:01:03", "17:02:03", "17:03:03", "17:04:03", "17:05:03", "17:06:03", "17:07:03", "17:08:03", "17:09:03", "17:10:03", "17:11:03", "17:12:03", "17:13:03", "17:14:03", "17:15:03", "17:16:03", "17:17:03", "17:18:03", "17:19:03", "17:20:03", "17:21:03", "17:22:03", "17:23:03", "17:24:03", "17:25:03", "17:26:03", "17:27:03", "17:28:03", "17:29:03", "17:30:03", "17:31:03", "17:32:03", "17:33:03", "17:34:03", "17:35:03", "17:36:03", "17:37:03", "17:38:03", "17:39:03", "17:40:03", "17:41:03", "17:42:03", "17:43:03", "17:44:03", "17:45:03", "17:46:03", "17:47:03", "17:48:03", "17:49:03", "17:50:03", "17:51:03", "17:52:03", "17:53:03", "17:54:03", "17:55:03"…]

log表示(上が一番古い/下が一番最新)
16:16:03
18:56:03

ご教授の程宜しくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

足りない情報がいろいろあるんですが、こういう感じですか？

http://jsbin.com/huwujukuqu/edit?html,js,output

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<svg id="myGraph">
</svg>

javascript
1var values =  ["16:16:03", "16:17:03", "16:18:03", "16:19:03", "16:20:03", "16:21:03", "16:22:03", "16:23:03", "16:24:03", "16:25:03", "16:26:03"];
2// valuesは途中で省略。 jsbinの方は質問に上げてある分だけ書いた
3
4var dataSet = values.map(function(x){
5  return Date.parse('2016/08/18 '+x);
6});
7
8var svgWidth = 600;
9var svgHeight = 400;
10var offsetX = 0;
11var offsetY = 140;
12
13    var date_Min = d3.min(dataSet);
14    var date_Max = d3.max(dataSet);
15
16    console.log(date_Min);
17    console.log(date_Max);
18
19
20
21    //横方向の目盛を表示
22    var formatDate = d3.time.format( "%H:%M" );
23    var xScale = d3.time.scale()        //スケールを設定
24        .domain([date_Min, date_Max])
25        .range([0,svgWidth]);            //出力サイズ
26
27
28    //横方向の線を表示する
29    d3.select("#myGraph")
30        .attr("width", svgWidth)
31        .attr("height", svgHeight)
32        .append("g")                    //rect要素を追加
33        //  .attr("class", "axis_x")        //CSSクラスを指定
34        .attr("transform", "translate("+offsetX+", "+(svgHeight -offsetY)+")")        //線の横幅を指定
35        .call(
36            d3.svg.axis()
37            .scale(xScale)
38            .orient("bottom") // 値を軸の下側に表示
39            .ticks(8) // 目盛りの個数を提案
40            .tickFormat(formatDate)
41            /*{
42            var fmtFunc = d3.time.format("%H:%M");
43            return fmtFunc(d);
44            )*/
45        )