Вы правы - эта функциональность в настоящее время не включена в тепловую карту.
Было бы неплохо добавить его, но это, вероятно, немного работы.
В то же время, если вы хотите немного поиграть с параметрами, вы можете получить приличное приближение, используя график рассеяния, поскольку он позволяет вам изменять размер и форму точек.
Я взял пример фильтрации тепловых карт , поменял scatterPlot на heatmap, изменил несколько параметров и получил что-то, что работает достаточно хорошо:
Во-первых, мы можем установить ширину и высоту для размещения «точек» размером 15x15, как мы это делаем в примере с тепловой картой - за исключением того, что мы застряли с квадратными точками, если мы используем диаграмму рассеяния:
.width(12 * 15 + 40)
.height(27 * 15 + 20)
.margins({left: 40, top: 0, right: 0, bottom: 20})
Поля для текста оси.
Далее мы устанавливаем домен x, чтобы он соответствовал точкам, центрированным по их значениям:
.x(d3.scaleLinear().domain([-0.5,11.5]))
.yAxisPadding(0.5)
(Не уверен, почему elasticY работает, но elasticX не ... только столько копания вы можете сделать за один раз.)
Далее мы можем установить исключенный радиус таким же, как нормальный радиус, и использовать серый для исключенных точек:
.symbol(d3.symbolSquare)
.excludedSize(15)
.symbolSize(15)
.excludedColor('#ccc')
Есть несколько разных способов указать, что фильтруется вход / выход - посмотрите scatterPlot docs для других идей. Например, вы также можете использовать excludedOpacity. Но я нахожу непрозрачность немного запутанной для тепловой карты, потому что затухание заставляет его выглядеть так, как будто оно имеет другое значение, а не исключено полностью. Сезон по вкусу!
Наконец, на диаграмме рассеяния используются «реальные» оси d3, поэтому необходимо правильно настроить ось Y для правильного отображения чисел:
heatmapChart.yAxis().tickFormat(d3.format('.4'))
В целом, я был удивлен, насколько это легко, поскольку они принимают один и тот же формат данных и имеют большинство одинаковых параметров.
Пример скрипки.