d c. js тепловая карта - сделать верхнюю строку прямоугольной так, чтобы она начиналась с y = "0"

Question

У меня есть объявление c. js работает тепловая карта:

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

Вы можете видеть, что линии не совпадают с нижними краями прямоугольников. Вставить сами линии очень просто, вы просто начинаете с нуля и добавляете 11 строк в зависимости от высоты прямоугольников, которая в данном случае всегда будет 11 / chart.effectiveHeight ().

Причина, по которой они не работают совпадают, кажется, что верхняя строка прямоугольника не всегда начинается с 0, вместо этого, похоже, есть случайная (?) позиция y, с которой начинается диаграмма, это будет меняться с высотой контейнера диаграммы, например, это y позиция начинается с 5:

Если бы это было согласованно, то я мог бы просто начать добавлять строки с этого номера вместо 0, но это не так . Я пробовал пару хитрых обходных путей, однако я не уверен, как получить положение y всех прямоугольников после того, как они будут доступны в DOM.

Интересно, что на демонстрационной тепловой карте нет этой проблемы:

Вот код тепловой карты:

 const heat_map = dc.heatMap('#heatmap');
  heat_map
    .width(0)
    .height(0)
    .margins(margins)
    .dimension(hm_dim)
    .group(hm_group)
    .keyAccessor(function(d) { return +d.key[0]; })
    .valueAccessor(function(d) { return +d.key[1]; })
    .colorAccessor(function(d) { return +d.value; })
    .colors(color_scale)
    .calculateColorDomain()
    .yBorderRadius(0)
    .xBorderRadius(0)
  heat_map.render();

Есть ли способ заставить прямоугольники начинаться с 0 ? Или получить случайную позицию y для верхних строк? Я посмотрел исходный код, но немного заблудился. Также я подумал о создании ложной группы, которая будет включать каждый прямоугольник в сетке, а линии сетки тогда могут быть прямоугольными границами, но я подумал, что это было немного тяжеловато.

Answer 1

Альтернативный ответ для адаптивных / изменяемых размеров диаграмм

Я снова возвращаюсь к этому вопросу после того, как переписал свою тепловую диаграмму, чтобы она была отзывчивой - с использованием метода «ResizeObserver», описанного в d c. js примеры изменения размера и ответ Гордона на этот вопрос

Хотя указание ширины и высоты диаграммы для тепловой карты в ответе Гордона все еще работает, это плохо сочетается с методом изменения размера, потому что для диаграмм с измененным размером .width и .height установлено значение "null". Это означает, что проблема округления повторится снова, и тепловые ящики снова будут компенсированы случайным целым числом x или y от 0 до 5 (если вы не хотите написать собственную функцию изменения размера для тепловых карт).

Альтернативный ответ относительно прост и может быть определен путем выбора только одного элемента теплового ящика на тепловой карте.

Значение вертикального смещения для тепловых ящиков является остаточным значением при разделении атрибута y теплового ящика атрибутом высоты теплового ящика.

const heatbox_y = heat_map.select('.heat-box').attr('y);
const heatbox_height = heat_map.select('.heat-box').attr('height')
const vertical_offset = heatbox_y % heatbox_height 

Модуль% вернет остаток.

Горизонтальное смещение может быть определено таким же образом.

Таким образом, вы может добавлять линии в диаграмму через равные промежутки времени, определяемые значениями heatbox_height + vertical_offset.

Это будет работать, если вы выберете любой тепловой ящик на диаграмме, и поэтому он подходит для таких случаев, когда вы не можете Гарантия наличия теплового бокса на каждом уровне x или y. А это означает, что вы можете при необходимости установить высоту и ширину диаграммы равными «null».

Answer 2

Выделение ячеек с помощью CSS

Ячейки легко очертить с помощью CSS:

rect.heat-box {
  stroke-width: 1;
  stroke: black;
}

Пример скрипта .

Однако, как вы отметили, это работает, только если все ячейки имеют значения; crossfilter не будет создавать пустые, и я согласен, что было бы абсурдно заполнять их, используя поддельную группу только для некоторых строк.

Итак, чтобы ответить на ваш исходный вопрос ...

Почему есть ли пробел в верхней части диаграммы?

Тепловая карта вычисляет целочисленный размер ячеек, и может остаться свободное пространство (поскольку пространство не делится идеально).

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

chart
  .width(45 * 20 + 80)
  .height(45 * 5 + 40)

Поля по умолчанию: {top: 10, right: 50, bottom: 30, left: 30}, поэтому для каждой ячейки выделяется 45x45 пикселей и добавляются поля, чтобы получить правильный размер диаграммы.

Поскольку тепловая карта в этом примере dr aws 20 столбцов на 5 строк, она вычислит ширину ячейки и высота 45.