D3圖表 - 使用tickValues進行時間提供「translate（NaN，0）」

在我的d3折線圖中，我只想繪製繪製數據的刻度。這證明是一個帶時間戳的問題，雖然我得到：D3圖表 - 使用tickValues進行時間提供「translate（NaN，0）」

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);

來源

2016-09-03 dman

您將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，而不是作爲%I:%M而%I is hours in the range 01-12使用%H 24小時時鐘。爲了一致性，我建議將您的時間解析函數更改爲d3.timeParse('%H:%M')，儘管使用%I解析時間大於12的時間似乎有效。

最後，你還需要設置你的規模對象x的domain，例如：

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

傳遞給domain兩個值的最小值和最大值的X值要使用的軸。我已經使用了數據的最小值和最大值，但我可以選擇不同的時間範圍（例如，00:00到24:00），只要它包含所有數據點即可。

來源

2016-09-03 13:57:03

謝謝！但我仍然得到'錯誤：屬性變換：期望的數字，「translate（NaN，0）」。http://dpaste.com/3NPEZ66 – dman

@dman：好吧，那是因爲在你修改後的代碼中，您已將創建X軸的代碼移動到將X軸時間轉換爲字符串的代碼上方，以將其轉換爲日期時間。正如我在答覆的第一行中所寫的，您將X值指定爲次數，所以您還必須將X軸刻度值指定爲次數。 –

D3圖表 - 使用tickValues進行時間提供「translate（NaN，0）」

回答

相關問題