Блог

Главная - Вопросы по программированию - Как я могу заставить эту тепловую карту d3 отображать определенные временные рамки?

Как я могу заставить эту тепловую карту d3 отображать определенные временные рамки?

#html #d3.js

#HTML #d3.js

Вопрос:

Для справки я использую html-код с этого веб-сайта. http://bl.ocks.org/tjdecke/5558084 Я также использую его файлы example .tsv. Я пытаюсь изменить тепловую карту так, чтобы блоки между 1 AM — 7 AM не отображались, а моя тепловая карта отображала бы только информацию между 8AM — 12PM. Я изменил количество часов в times массиве, но это только сдвигает часы, в то время как количество блоков остается прежним. Я также попытался ограничить данные, включив только те, значение которых равно 8 или выше для «часа», но я получаю это.

Попытка

Есть идеи, как это исправить? Я очень ценю ваше время, так как я возился уже несколько часов, но, похоже, ничего не получается.

Ответ №1:

В примере используется 24 столбца в сетке, вам нужно будет настроить количество столбцов, которое вы хотите:

   var margin = { top: 50, right: 0, bottom: 100, left: 30 },
      width = 960 - margin.left - margin.right,
      height = 430 - margin.top - margin.bottom,
      gridSize = Math.floor(width / 24), // Need to change here.
      legendElementWidth = gridSize*2,

Возможно, вам потребуется изменить в других местах, но это, по крайней мере, в начальной точке.

Комментарии:

1. Спасибо за ваш ответ Для тех, кто заинтересован, исправление было в этой строке кода:

2. cards.enter().append("rect") .attr("x", function(d) { return (d.hour - 8) * gridSize; }) //changed from 1 to 8 .attr("y", function(d) { return (d.day - 1) * gridSize; }) .attr("rx", 4) .attr("ry", 4) .attr(«класс», «час с границами») .attr(«ширина», размер сетки) .attr(«высота», размер сетки) .style(«заливка», цвета [0]);

Метки: