D3 v4で作業時間を作成しますか？

Question

D3 v4で作業時間のみを表示するtimeScaleと軸を作成するにはどうすればよいですか？

たとえば、午後5時から午前9時までのすべての時間を除いて連続した日を表示するには、1時間ごとの開始時にキューにあるアイテムの数を示している勤務日が午前9時から午後5時のグラフがある場合？

5日以上のデータがあり、任意の日数にズームインまたはズームアウトできる場合は、週末を取る必要もあります。

不要なティックとラベルを時間間隔フィルタ機能で取り出せますが、timeScale自体にはすべての時間が表示されます。

Answer 1

残念ながら、両方の要件...

• は「唯一の労働時間を示しD3のV4でのタイムスケールと軸の作成」
• 「私はより多くを持っている場合は、週末を取り出し5日以上のデータ "

...時間スケールを使用すると単純にできません。あなたが継続的、定量的変数として時間を表示したいとき

d3.time.scaleは、そのようなあなたに撮りたいときなど、使用すべきである：マイク・ボストック（D3の作成者）によると

実際の日数は夏時間の変更により23〜25時間、閏年のために365〜366日の範囲で変化します。 の連続した時間をプロットしたくない場合、通常のカレンダー単位のすべての不規則性をプロットしたい場合は、おそらくd3.time.scaleを使用したくない場合は、[別のスケール]を使用します。 （強調鉱山）

は（注：彼の答えに、ボストックしかしv3.x.を使用している、推論はV4のために同じまま）

このように、あなたのケースでは、より良いアプローチを作成するだろうバンドスケール（d3.scaleBand()）、およびこのようなあなたの日と時間をマッピング：

[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11...] 

：次に

day 1, 9am --> 0 
day 1, 10am --> 1 
day 1, 11am --> 2 
day 1, 12am --> 3 
day 1, 1pm --> 4 
day 1, 2pm --> 5 
day 1, 3pm --> 6 
day 1, 4am --> 7 
day 1, 5am --> 8 
day 2, 9am --> 9 
day 2, 10am --> 10 
...etc 

は、あなたがバーのx位置のためにこれらの値を持っています

定性的（定量的ではない）値としてそれらを使用して、バンドスケールを使用してバーを配置します。

Answer 2

フィドルを確認してください - https://jsfiddle.net/w9m2nob5/

をあなたは常に翌日から選択された日と3から9で、これらの12本のバーを表示するように計画している場合...あなたは、このようにそれを行うことができます。

//set constant timestamps 
var timeStamps = ["9am", "10am", "11am", "12pm", "1pm", "2pm", "3pm", "4pm", "5pm", "9am", "10am", "11am"]; 

//set linear scale 
    var x = d3.scale.linear() 
     .domain([0, timeStamps.length]) 
     .range([0, width]); 

    // Add your axis 
    svg.append("g") 
     .attr("transform", "translate(50,0)") 
     .call(d3.svg.axis().scale(x).ticks(timeStamps.length) 
     .tickFormat(function(i) { 
      return timeStamps[i]; 
     }));