D3 отображает тот же период времени в xAxis

Question

Я пытаюсь отобразить 36-часовой массив

labels = ["01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00", "00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00"]

с данными

data = [16.1, 15.55, 14.12, 11.81, 9.637, 8.022, 6.625, 5.105, 5.216, 8.398, 11.4, 10.86, 10.52, 11.14, 15.37, 13.26, 11.33, 8.572, 12.21, 16.98, 12.43, 10.4, 10.09, 10.19, 9.361, 9.068, 9.763, 12.06, 15.52, 17.32, 15.53, 14.46, 14.05, 24.24, 12.26, 11.01]

, но отображается только 24 элемента с 1:00 до 00:00. Как настроить ось D3 для отображения данных с повторяющимися отметками времени?

Answer 1

Не просто используйте часы, создайте ось с полными временными метками, а затем отформатируйте метки оси, чтобы показывать только время:

var width = 600;
var height = 50;
var yPad = 50;
var xPad = 50;
var xTicks = 18;

var now = d3.utcHour(new Date());
var h36 = d3.utcHour.offset(now, 36);

var svg = d3
      .select("#d3")
      .append('svg')
      .attr('width', width)
      .attr('height', height);

var xScale = d3
      .scaleTime()
      .domain([now, h36])
      .rangeRound([1 * xPad, width - 2 * xPad]);

var xAxis = d3
      .axisBottom(xScale)
      .ticks(xTicks)
      .tickFormat(d3.timeFormat('%H00'));

svg
      .append('g')
      .attr('class', 'xaxis')
      .attr('transform', 'translate(0, ' + (height - yPad) + ')')
      .call(xAxis);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<div id="d3"></div>