D3 Chart - 時間にtickValuesを使用する "translate（NaN、0）"

Question

私のd3折れ線グラフでは、プロットされたデータの目盛だけが必要です。これはタイムスタンプの問題であることがわかります。

d3.js:7651 Error: <g> attribute transform: Expected number, "translate(NaN,0)".

文字列をtickValues配列の数字に変換すると思っていましたが、コロンがあるので、できません。何か案は？

  // Hard coded data 
      scope.data = [ 
      {date: '12:00', glucoseLevel: 400}, 
      {date: '15:00', glucoseLevel: 200}, 
      {date: '18:00', glucoseLevel: 300}, 
      {date: '23:00', glucoseLevel: 400} 
      ]; 


      var parseDate = d3.timeParse('%I:%M'); 
      scope.data.forEach(function(d) { 
      d.date = parseDate(d.date); 
      d.glucoseLevel = +d.glucoseLevel; 
      }); 



      var x = d3.scaleTime() 
      .range([0, width]); 

      var xAxis = d3.axisBottom(x) 
         .tickValues(['12:00', '15:00', '18:00', '23:00']); 
      // Add the X Axis 
      svg.append('g') 
      .attr('class', 'x axis') 
      .attr('transform', 'translate(0,' + height + ')') 
      .call(xAxis); 

Answer 1

X値を時刻として指定しているため、X軸のティック値も時刻として指定する必要があります。

すでに正しい形式のX値を持っているとして、あなただけの

var xAxis = d3.axisBottom(x) 
       .tickValues(scope.data.map(function (d) { return d.date; })); 

.tickValues()を書くことができ、それはダニが現れる軸上で場所を設定するためだ、目盛りラベルを設定するためではありません。あなたには、いくつかの方法でフォーマット目盛りラベルをしたい場合は、例えば、tickFormatを使用してフォーマッタを指定します。

var xAxis = d3.axisBottom(x) 
       .tickValues(scope.data.map(function (d) { return d.date; })) 
       .tickFormat(d3.timeFormat("%H:%M")); 

私はフォーマット文字列%H:%Mの代わりに、24時間クロックを使用しています%Hに対し%I is hours in the range 01-12として%I:%Mを使用しました。一貫性を保つために、時間解析機能をd3.timeParse('%H:%M')に変更することをお勧めしますが、%Iを使用して12時間を超える時間を解析することは機能しているようです。

最後に、あなたはまた、例えば、あなたの規模オブジェクトxのdomainを設定する必要があります：domainに渡さ

var x = d3.scaleTime() 
    .domain([parseDate('12:00'), parseDate('23:00')]) 
    .range([0, width]); 

二つの値が最小値と最大X値が軸に使用します。データの最小値と最大値を使用しましたが、すべてのデータポイントが含まれている限り、異なる時間範囲（たとえば、00:00〜24:00）を選択できました。