синхронизация выделения между двумя тепловыми картами

введите описание изображения здесь

Я строю несколько тепловых карт из набора данных, приведенного ниже.

[
  {
    "x2": 1,
    "y2": 1,
    "x2_TT": 20,
    "y2_TT": 23
  },
  {
    "x2": 1,
    "y2": 1,
    "x2_TT": 20,
    "y2_TT": 23
  },
  {
    "x2": 1,
    "y2": 1,
    "x2_TT": 20,
    "y2_TT": 23
  },
  {
    "x2": 1,
    "y2": 1,
    "x2_TT": 20,
    "y2_TT": 23
  },
  {
    "x2": 1,
    "y2": 1,
    "x2_TT": 20,
    "y2_TT": 23
  },
  {
    "x2": 1,
    "y2": 1,
    "x2_TT": 20,
    "y2_TT": 23
  },
  {
    "x2": 1,
    "y2": 1,
    "x2_TT": 20,
    "y2_TT": 23
  },
  {
    "x2": 1,
    "y2": 1,
    "x2_TT": 20,
    "y2_TT": 23
  },
  {
    "x2": 1,
    "y2": 1,
    "x2_TT": 20,
    "y2_TT": 23
  },
  {
    "x2": 1,
    "y2": 1,
    "x2_TT": 20,
    "y2_TT": 23
  },
  {
    "x2": 0.9163309159,
    "y2": 0.9163309159,
    "x2_TT": 18,
    "y2_TT": 21
  },
  {
    "x2": 0.9163309159,
    "y2": 0.9163309159,
    "x2_TT": 18,
    "y2_TT": 21
  },
  {
    "x2": 0.9163309159,
    "y2": 0.9163309159,
    "x2_TT": 18,
    "y2_TT": 21
  },
  {
    "x2": 0.9163309159,
    "y2": 0.9163309159,
    "x2_TT": 18,
    "y2_TT": 21
  },
  {
    "x2": 0.9163309159,
    "y2": 0.9163309159,
    "x2_TT": 18,
    "y2_TT": 21
  },
  {
    "x2": 0.9163309159,
    "y2": 0.9163309159,
    "x2_TT": 18,
    "y2_TT": 21
  },
  {
    "x2": 0.9163309159,
    "y2": 0.9163309159,
    "x2_TT": 18,
    "y2_TT": 21
  },
  {
    "x2": 0.9163309159,
    "y2": 0.9163309159,
    "x2_TT": 18,
    "y2_TT": 21
  },
  {
    "x2": 0.9163309159,
    "y2": 0.9163309159,
    "x2_TT": 18,
    "y2_TT": 21
  },
  {
    "x2": 0.9163309159,
    "y2": 0.9163309159,
    "x2_TT": 18,
    "y2_TT": 21
  },
  {
    "x2": 0.7849029059,
    "y2": 0.7849029059,
    "x2_TT": 16,
    "y2_TT": 19
  },
  {
    "x2": 0.7849029059,
    "y2": 0.7849029059,
    "x2_TT": 16,
    "y2_TT": 19
  },
  {
    "x2": 0.7849029059,
    "y2": 0.7849029059,
    "x2_TT": 16,
    "y2_TT": 19
  },
  {
    "x2": 0.7849029059,
    "y2": 0.7849029059,
    "x2_TT": 16,
    "y2_TT": 19
  },
  {
    "x2": 0.7849029059,
    "y2": 0.7849029059,
    "x2_TT": 16,
    "y2_TT": 19
  },
  {
    "x2": 0.7849029059,
    "y2": 0.7849029059,
    "x2_TT": 16,
    "y2_TT": 19
  },
  {
    "x2": 0.7849029059,
    "y2": 0.7849029059,
    "x2_TT": 16,
    "y2_TT": 19
  },
  {
    "x2": 0.7849029059,
    "y2": 0.7849029059,
    "x2_TT": 16,
    "y2_TT": 19
  },
  {
    "x2": 0.7849029059,
    "y2": 0.7849029059,
    "x2_TT": 16,
    "y2_TT": 19
  },
  {
    "x2": 0.7849029059,
    "y2": 0.7849029059,
    "x2_TT": 16,
    "y2_TT": 19
  },
  {
    "x2": 0.6695846541,
    "y2": 0.6695846541,
    "x2_TT": 14,
    "y2_TT": 17
  },
  {
    "x2": 0.6695846541,
    "y2": 0.6695846541,
    "x2_TT": 14,
    "y2_TT": 17
  },
  {
    "x2": 0.6695846541,
    "y2": 0.6695846541,
    "x2_TT": 14,
    "y2_TT": 17
  },
  {
    "x2": 0.6695846541,
    "y2": 0.6695846541,
    "x2_TT": 14,
    "y2_TT": 17
  },
  {
    "x2": 0.6695846541,
    "y2": 0.6695846541,
    "x2_TT": 14,
    "y2_TT": 17
  },
  {
    "x2": 0.6695846541,
    "y2": 0.6695846541,
    "x2_TT": 14,
    "y2_TT": 17
  },
  {
    "x2": 0.6695846541,
    "y2": 0.6695846541,
    "x2_TT": 14,
    "y2_TT": 17
  },
  {
    "x2": 0.6695846541,
    "y2": 0.6695846541,
    "x2_TT": 14,
    "y2_TT": 17
  },
  {
    "x2": 0.6695846541,
    "y2": 0.6695846541,
    "x2_TT": 14,
    "y2_TT": 17
  },
  {
    "x2": 0.6695846541,
    "y2": 0.6695846541,
    "x2_TT": 14,
    "y2_TT": 17
  },
  {
    "x2": 0.5604744826,
    "y2": 0.5604744826,
    "x2_TT": 12,
    "y2_TT": 15
  },
  {
    "x2": 0.5604744826,
    "y2": 0.5604744826,
    "x2_TT": 12,
    "y2_TT": 15
  },
  {
    "x2": 0.5604744826,
    "y2": 0.5604744826,
    "x2_TT": 12,
    "y2_TT": 15
  },
  {
    "x2": 0.5604744826,
    "y2": 0.5604744826,
    "x2_TT": 12,
    "y2_TT": 15
  },
  {
    "x2": 0.5604744826,
    "y2": 0.5604744826,
    "x2_TT": 12,
    "y2_TT": 15
  },
  {
    "x2": 0.5604744826,
    "y2": 0.5604744826,
    "x2_TT": 12,
    "y2_TT": 15
  },
  {
    "x2": 0.5604744826,
    "y2": 0.5604744826,
    "x2_TT": 12,
    "y2_TT": 15
  },
  {
    "x2": 0.5604744826,
    "y2": 0.5604744826,
    "x2_TT": 12,
    "y2_TT": 15
  },
  {
    "x2": 0.5604744826,
    "y2": 0.5604744826,
    "x2_TT": 12,
    "y2_TT": 15
  },
  {
    "x2": 0.5604744826,
    "y2": 0.5604744826,
    "x2_TT": 12,
    "y2_TT": 15
  },
  {
    "x2": 0.433624775,
    "y2": 0.433624775,
    "x2_TT": 9,
    "y2_TT": 12
  },
  {
    "x2": 0.433624775,
    "y2": 0.433624775,
    "x2_TT": 9,
    "y2_TT": 12
  },
  {
    "x2": 0.433624775,
    "y2": 0.433624775,
    "x2_TT": 9,
    "y2_TT": 12
  },
  {
    "x2": 0.433624775,
    "y2": 0.433624775,
    "x2_TT": 9,
    "y2_TT": 12
  },
  {
    "x2": 0.433624775,
    "y2": 0.433624775,
    "x2_TT": 9,
    "y2_TT": 12
  },
  {
    "x2": 0.433624775,
    "y2": 0.433624775,
    "x2_TT": 9,
    "y2_TT": 12
  },
  {
    "x2": 0.433624775,
    "y2": 0.433624775,
    "x2_TT": 9,
    "y2_TT": 12
  },
  {
    "x2": 0.433624775,
    "y2": 0.433624775,
    "x2_TT": 9,
    "y2_TT": 12
  },
  {
    "x2": 0.433624775,
    "y2": 0.433624775,
    "x2_TT": 9,
    "y2_TT": 12
  },
  {
    "x2": 0.433624775,
    "y2": 0.433624775,
    "x2_TT": 9,
    "y2_TT": 12
  },
  {
    "x2": 0.3117981232,
    "y2": 0.3117981232,
    "x2_TT": 7,
    "y2_TT": 10
  },
  {
    "x2": 0.3117981232,
    "y2": 0.3117981232,
    "x2_TT": 7,
    "y2_TT": 10
  },
  {
    "x2": 0.3117981232,
    "y2": 0.3117981232,
    "x2_TT": 7,
    "y2_TT": 10
  },
  {
    "x2": 0.3117981232,
    "y2": 0.3117981232,
    "x2_TT": 7,
    "y2_TT": 10
  },
  {
    "x2": 0.3117981232,
    "y2": 0.3117981232,
    "x2_TT": 7,
    "y2_TT": 10
  },
  {
    "x2": 0.3117981232,
    "y2": 0.3117981232,
    "x2_TT": 7,
    "y2_TT": 10
  },
  {
    "x2": 0.3117981232,
    "y2": 0.3117981232,
    "x2_TT": 7,
    "y2_TT": 10
  },
  {
    "x2": 0.3117981232,
    "y2": 0.3117981232,
    "x2_TT": 7,
    "y2_TT": 10
  },
  {
    "x2": 0.3117981232,
    "y2": 0.3117981232,
    "x2_TT": 7,
    "y2_TT": 10
  },
  {
    "x2": 0.3117981232,
    "y2": 0.3117981232,
    "x2_TT": 7,
    "y2_TT": 10
  },
  {
    "x2": 0.2070667799,
    "y2": 0.2070667799,
    "x2_TT": 5,
    "y2_TT": 8
  },
  {
    "x2": 0.2070667799,
    "y2": 0.2070667799,
    "x2_TT": 5,
    "y2_TT": 8
  },
  {
    "x2": 0.2070667799,
    "y2": 0.2070667799,
    "x2_TT": 5,
    "y2_TT": 8
  },
  {
    "x2": 0.2070667799,
    "y2": 0.2070667799,
    "x2_TT": 5,
    "y2_TT": 8
  },
  {
    "x2": 0.2070667799,
    "y2": 0.2070667799,
    "x2_TT": 5,
    "y2_TT": 8
  },
  {
    "x2": 0.2070667799,
    "y2": 0.2070667799,
    "x2_TT": 5,
    "y2_TT": 8
  },
  {
    "x2": 0.2070667799,
    "y2": 0.2070667799,
    "x2_TT": 5,
    "y2_TT": 8
  },
  {
    "x2": 0.2070667799,
    "y2": 0.2070667799,
    "x2_TT": 5,
    "y2_TT": 8
  },
  {
    "x2": 0.2070667799,
    "y2": 0.2070667799,
    "x2_TT": 5,
    "y2_TT": 8
  },
  {
    "x2": 0.2070667799,
    "y2": 0.2070667799,
    "x2_TT": 5,
    "y2_TT": 8
  },
  {
    "x2": 0.0826720825,
    "y2": 0.0826720825,
    "x2_TT": 3,
    "y2_TT": 6
  },
  {
    "x2": 0.0826720825,
    "y2": 0.0826720825,
    "x2_TT": 3,
    "y2_TT": 6
  },
  {
    "x2": 0.0826720825,
    "y2": 0.0826720825,
    "x2_TT": 3,
    "y2_TT": 6
  },
  {
    "x2": 0.0826720825,
    "y2": 0.0826720825,
    "x2_TT": 3,
    "y2_TT": 6
  },
  {
    "x2": 0.0826720825,
    "y2": 0.0826720825,
    "x2_TT": 3,
    "y2_TT": 6
  },
  {
    "x2": 0.0826720825,
    "y2": 0.0826720825,
    "x2_TT": 3,
    "y2_TT": 6
  },
  {
    "x2": 0.0826720825,
    "y2": 0.0826720825,
    "x2_TT": 3,
    "y2_TT": 6
  },
  {
    "x2": 0.0826720825,
    "y2": 0.0826720825,
    "x2_TT": 3,
    "y2_TT": 6
  },
  {
    "x2": 0.0826720825,
    "y2": 0.0826720825,
    "x2_TT": 3,
    "y2_TT": 6
  },
  {
    "x2": 0.0826720825,
    "y2": 0.0826720825,
    "x2_TT": 3,
    "y2_TT": 6
  },
  {
    "x2": 0,
    "y2": 0,
    "x2_TT": 2,
    "y2_TT": 5
  },
  {
    "x2": 0,
    "y2": 0,
    "x2_TT": 2,
    "y2_TT": 5
  },
  {
    "x2": 0,
    "y2": 0,
    "x2_TT": 2,
    "y2_TT": 5
  },
  {
    "x2": 0,
    "y2": 0,
    "x2_TT": 2,
    "y2_TT": 5
  },
  {
    "x2": 0,
    "y2": 0,
    "x2_TT": 2,
    "y2_TT": 5
  },
  {
    "x2": 0,
    "y2": 0,
    "x2_TT": 2,
    "y2_TT": 5
  },
  {
    "x2": 0,
    "y2": 0,
    "x2_TT": 2,
    "y2_TT": 5
  },
  {
    "x2": 0,
    "y2": 0,
    "x2_TT": 2,
    "y2_TT": 5
  },
  {
    "x2": 0,
    "y2": 0,
    "x2_TT": 2,
    "y2_TT": 5
  },
  {
    "x2": 0,
    "y2": 0,
    "x2_TT": 2,
    "y2_TT": 5
  }];

Когда я выбираю ячейку на тепловой карте, для всех остальных ячеек, кроме выбранной, по умолчанию используется цвет #ccc. На соответствующих отфильтрованных тепловых картах по умолчанию используется основной синий цвет. Я прилагаю изображение ниже для справки.

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dc/3.1.5/dc.css"/>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fetch/3.0.0/fetch.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.12.0/d3.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dc/3.1.5/dc.js"></script>


var runDim;

var data = [
  {
    "x2": 1,
    "y2": 1,
    "x2_TT": 20,
    "y2_TT": 23
  },
  {
    "x2": 1,
    "y2": 1,
    "x2_TT": 20,
    "y2_TT": 23
  },
  {
    "x2": 1,
    "y2": 1,
    "x2_TT": 20,
    "y2_TT": 23
  },
  {
    "x2": 1,
    "y2": 1,
    "x2_TT": 20,
    "y2_TT": 23
  },
  {
    "x2": 1,
    "y2": 1,
    "x2_TT": 20,
    "y2_TT": 23
  },
  {
    "x2": 1,
    "y2": 1,
    "x2_TT": 20,
    "y2_TT": 23
  },
  {
    "x2": 1,
    "y2": 1,
    "x2_TT": 20,
    "y2_TT": 23
  },
  {
    "x2": 1,
    "y2": 1,
    "x2_TT": 20,
    "y2_TT": 23
  },
  {
    "x2": 1,
    "y2": 1,
    "x2_TT": 20,
    "y2_TT": 23
  },
  {
    "x2": 1,
    "y2": 1,
    "x2_TT": 20,
    "y2_TT": 23
  },
  {
    "x2": 0.9163309159,
    "y2": 0.9163309159,
    "x2_TT": 18,
    "y2_TT": 21
  },
  {
    "x2": 0.9163309159,
    "y2": 0.9163309159,
    "x2_TT": 18,
    "y2_TT": 21
  },
  {
    "x2": 0.9163309159,
    "y2": 0.9163309159,
    "x2_TT": 18,
    "y2_TT": 21
  },
  {
    "x2": 0.9163309159,
    "y2": 0.9163309159,
    "x2_TT": 18,
    "y2_TT": 21
  },
  {
    "x2": 0.9163309159,
    "y2": 0.9163309159,
    "x2_TT": 18,
    "y2_TT": 21
  },
  {
    "x2": 0.9163309159,
    "y2": 0.9163309159,
    "x2_TT": 18,
    "y2_TT": 21
  },
  {
    "x2": 0.9163309159,
    "y2": 0.9163309159,
    "x2_TT": 18,
    "y2_TT": 21
  },
  {
    "x2": 0.9163309159,
    "y2": 0.9163309159,
    "x2_TT": 18,
    "y2_TT": 21
  },
  {
    "x2": 0.9163309159,
    "y2": 0.9163309159,
    "x2_TT": 18,
    "y2_TT": 21
  },
  {
    "x2": 0.9163309159,
    "y2": 0.9163309159,
    "x2_TT": 18,
    "y2_TT": 21
  },
  {
    "x2": 0.7849029059,
    "y2": 0.7849029059,
    "x2_TT": 16,
    "y2_TT": 19
  },
  {
    "x2": 0.7849029059,
    "y2": 0.7849029059,
    "x2_TT": 16,
    "y2_TT": 19
  },
  {
    "x2": 0.7849029059,
    "y2": 0.7849029059,
    "x2_TT": 16,
    "y2_TT": 19
  },
  {
    "x2": 0.7849029059,
    "y2": 0.7849029059,
    "x2_TT": 16,
    "y2_TT": 19
  },
  {
    "x2": 0.7849029059,
    "y2": 0.7849029059,
    "x2_TT": 16,
    "y2_TT": 19
  },
  {
    "x2": 0.7849029059,
    "y2": 0.7849029059,
    "x2_TT": 16,
    "y2_TT": 19
  },
  {
    "x2": 0.7849029059,
    "y2": 0.7849029059,
    "x2_TT": 16,
    "y2_TT": 19
  },
  {
    "x2": 0.7849029059,
    "y2": 0.7849029059,
    "x2_TT": 16,
    "y2_TT": 19
  },
  {
    "x2": 0.7849029059,
    "y2": 0.7849029059,
    "x2_TT": 16,
    "y2_TT": 19
  },
  {
    "x2": 0.7849029059,
    "y2": 0.7849029059,
    "x2_TT": 16,
    "y2_TT": 19
  },
  {
    "x2": 0.6695846541,
    "y2": 0.6695846541,
    "x2_TT": 14,
    "y2_TT": 17
  },
  {
    "x2": 0.6695846541,
    "y2": 0.6695846541,
    "x2_TT": 14,
    "y2_TT": 17
  },
  {
    "x2": 0.6695846541,
    "y2": 0.6695846541,
    "x2_TT": 14,
    "y2_TT": 17
  },
  {
    "x2": 0.6695846541,
    "y2": 0.6695846541,
    "x2_TT": 14,
    "y2_TT": 17
  },
  {
    "x2": 0.6695846541,
    "y2": 0.6695846541,
    "x2_TT": 14,
    "y2_TT": 17
  },
  {
    "x2": 0.6695846541,
    "y2": 0.6695846541,
    "x2_TT": 14,
    "y2_TT": 17
  },
  {
    "x2": 0.6695846541,
    "y2": 0.6695846541,
    "x2_TT": 14,
    "y2_TT": 17
  },
  {
    "x2": 0.6695846541,
    "y2": 0.6695846541,
    "x2_TT": 14,
    "y2_TT": 17
  },
  {
    "x2": 0.6695846541,
    "y2": 0.6695846541,
    "x2_TT": 14,
    "y2_TT": 17
  },
  {
    "x2": 0.6695846541,
    "y2": 0.6695846541,
    "x2_TT": 14,
    "y2_TT": 17
  },
  {
    "x2": 0.5604744826,
    "y2": 0.5604744826,
    "x2_TT": 12,
    "y2_TT": 15
  },
  {
    "x2": 0.5604744826,
    "y2": 0.5604744826,
    "x2_TT": 12,
    "y2_TT": 15
  },
  {
    "x2": 0.5604744826,
    "y2": 0.5604744826,
    "x2_TT": 12,
    "y2_TT": 15
  },
  {
    "x2": 0.5604744826,
    "y2": 0.5604744826,
    "x2_TT": 12,
    "y2_TT": 15
  },
  {
    "x2": 0.5604744826,
    "y2": 0.5604744826,
    "x2_TT": 12,
    "y2_TT": 15
  },
  {
    "x2": 0.5604744826,
    "y2": 0.5604744826,
    "x2_TT": 12,
    "y2_TT": 15
  },
  {
    "x2": 0.5604744826,
    "y2": 0.5604744826,
    "x2_TT": 12,
    "y2_TT": 15
  },
  {
    "x2": 0.5604744826,
    "y2": 0.5604744826,
    "x2_TT": 12,
    "y2_TT": 15
  },
  {
    "x2": 0.5604744826,
    "y2": 0.5604744826,
    "x2_TT": 12,
    "y2_TT": 15
  },
  {
    "x2": 0.5604744826,
    "y2": 0.5604744826,
    "x2_TT": 12,
    "y2_TT": 15
  },
  {
    "x2": 0.433624775,
    "y2": 0.433624775,
    "x2_TT": 9,
    "y2_TT": 12
  },
  {
    "x2": 0.433624775,
    "y2": 0.433624775,
    "x2_TT": 9,
    "y2_TT": 12
  },
  {
    "x2": 0.433624775,
    "y2": 0.433624775,
    "x2_TT": 9,
    "y2_TT": 12
  },
  {
    "x2": 0.433624775,
    "y2": 0.433624775,
    "x2_TT": 9,
    "y2_TT": 12
  },
  {
    "x2": 0.433624775,
    "y2": 0.433624775,
    "x2_TT": 9,
    "y2_TT": 12
  },
  {
    "x2": 0.433624775,
    "y2": 0.433624775,
    "x2_TT": 9,
    "y2_TT": 12
  },
  {
    "x2": 0.433624775,
    "y2": 0.433624775,
    "x2_TT": 9,
    "y2_TT": 12
  },
  {
    "x2": 0.433624775,
    "y2": 0.433624775,
    "x2_TT": 9,
    "y2_TT": 12
  },
  {
    "x2": 0.433624775,
    "y2": 0.433624775,
    "x2_TT": 9,
    "y2_TT": 12
  },
  {
    "x2": 0.433624775,
    "y2": 0.433624775,
    "x2_TT": 9,
    "y2_TT": 12
  },
  {
    "x2": 0.3117981232,
    "y2": 0.3117981232,
    "x2_TT": 7,
    "y2_TT": 10
  },
  {
    "x2": 0.3117981232,
    "y2": 0.3117981232,
    "x2_TT": 7,
    "y2_TT": 10
  },
  {
    "x2": 0.3117981232,
    "y2": 0.3117981232,
    "x2_TT": 7,
    "y2_TT": 10
  },
  {
    "x2": 0.3117981232,
    "y2": 0.3117981232,
    "x2_TT": 7,
    "y2_TT": 10
  },
  {
    "x2": 0.3117981232,
    "y2": 0.3117981232,
    "x2_TT": 7,
    "y2_TT": 10
  },
  {
    "x2": 0.3117981232,
    "y2": 0.3117981232,
    "x2_TT": 7,
    "y2_TT": 10
  },
  {
    "x2": 0.3117981232,
    "y2": 0.3117981232,
    "x2_TT": 7,
    "y2_TT": 10
  },
  {
    "x2": 0.3117981232,
    "y2": 0.3117981232,
    "x2_TT": 7,
    "y2_TT": 10
  },
  {
    "x2": 0.3117981232,
    "y2": 0.3117981232,
    "x2_TT": 7,
    "y2_TT": 10
  },
  {
    "x2": 0.3117981232,
    "y2": 0.3117981232,
    "x2_TT": 7,
    "y2_TT": 10
  },
  {
    "x2": 0.2070667799,
    "y2": 0.2070667799,
    "x2_TT": 5,
    "y2_TT": 8
  },
  {
    "x2": 0.2070667799,
    "y2": 0.2070667799,
    "x2_TT": 5,
    "y2_TT": 8
  },
  {
    "x2": 0.2070667799,
    "y2": 0.2070667799,
    "x2_TT": 5,
    "y2_TT": 8
  },
  {
    "x2": 0.2070667799,
    "y2": 0.2070667799,
    "x2_TT": 5,
    "y2_TT": 8
  },
  {
    "x2": 0.2070667799,
    "y2": 0.2070667799,
    "x2_TT": 5,
    "y2_TT": 8
  },
  {
    "x2": 0.2070667799,
    "y2": 0.2070667799,
    "x2_TT": 5,
    "y2_TT": 8
  },
  {
    "x2": 0.2070667799,
    "y2": 0.2070667799,
    "x2_TT": 5,
    "y2_TT": 8
  },
  {
    "x2": 0.2070667799,
    "y2": 0.2070667799,
    "x2_TT": 5,
    "y2_TT": 8
  },
  {
    "x2": 0.2070667799,
    "y2": 0.2070667799,
    "x2_TT": 5,
    "y2_TT": 8
  },
  {
    "x2": 0.2070667799,
    "y2": 0.2070667799,
    "x2_TT": 5,
    "y2_TT": 8
  },
  {
    "x2": 0.0826720825,
    "y2": 0.0826720825,
    "x2_TT": 3,
    "y2_TT": 6
  },
  {
    "x2": 0.0826720825,
    "y2": 0.0826720825,
    "x2_TT": 3,
    "y2_TT": 6
  },
  {
    "x2": 0.0826720825,
    "y2": 0.0826720825,
    "x2_TT": 3,
    "y2_TT": 6
  },
  {
    "x2": 0.0826720825,
    "y2": 0.0826720825,
    "x2_TT": 3,
    "y2_TT": 6
  },
  {
    "x2": 0.0826720825,
    "y2": 0.0826720825,
    "x2_TT": 3,
    "y2_TT": 6
  },
  {
    "x2": 0.0826720825,
    "y2": 0.0826720825,
    "x2_TT": 3,
    "y2_TT": 6
  },
  {
    "x2": 0.0826720825,
    "y2": 0.0826720825,
    "x2_TT": 3,
    "y2_TT": 6
  },
  {
    "x2": 0.0826720825,
    "y2": 0.0826720825,
    "x2_TT": 3,
    "y2_TT": 6
  },
  {
    "x2": 0.0826720825,
    "y2": 0.0826720825,
    "x2_TT": 3,
    "y2_TT": 6
  },
  {
    "x2": 0.0826720825,
    "y2": 0.0826720825,
    "x2_TT": 3,
    "y2_TT": 6
  },
  {
    "x2": 0,
    "y2": 0,
    "x2_TT": 2,
    "y2_TT": 5
  },
  {
    "x2": 0,
    "y2": 0,
    "x2_TT": 2,
    "y2_TT": 5
  },
  {
    "x2": 0,
    "y2": 0,
    "x2_TT": 2,
    "y2_TT": 5
  },
  {
    "x2": 0,
    "y2": 0,
    "x2_TT": 2,
    "y2_TT": 5
  },
  {
    "x2": 0,
    "y2": 0,
    "x2_TT": 2,
    "y2_TT": 5
  },
  {
    "x2": 0,
    "y2": 0,
    "x2_TT": 2,
    "y2_TT": 5
  },
  {
    "x2": 0,
    "y2": 0,
    "x2_TT": 2,
    "y2_TT": 5
  },
  {
    "x2": 0,
    "y2": 0,
    "x2_TT": 2,
    "y2_TT": 5
  },
  {
    "x2": 0,
    "y2": 0,
    "x2_TT": 2,
    "y2_TT": 5
  },
  {
    "x2": 0,
    "y2": 0,
    "x2_TT": 2,
    "y2_TT": 5
  }];

var data1 = [];

var f=0; var c=1;
for( var i=0; i<=data.length-1; i++){
  f++;
  if(f>Math.sqrt(data.length)){ f=1; c++; }
    data[i].column = f;
    data[i].row = c;
} 

  data.filter( (x) => {
    var obj = {}
    obj.value = x.x2;
    obj.tooltip = x.x2_TT;
    obj.row = x.row;
    obj.column = x.column;
    data1.push(obj)
  })
console.log( JSON.stringify(data1) )
console.log(data);

  var ndx    = crossfilter(data);

  Object.keys(data[0]).filter(x => !x.includes('_TT') && !x.includes('column') && !x.includes('row') ).forEach(function(i, index){

  //Dynamic DIV appended to body
  var testid = "<div class='col-lg-6 dcjs' id='chart"+index+"' onclick='HeatMap(this)'></div>";
                $('#test').append(testid);

  //$("#chart"+index).append("<h4 align='center'>"+i+"</h4>")              

  var chart = dc.heatMap("#chart"+index);

  var holder = Object.keys(data[0]).filter(x => !x.includes('_TT') && !x.includes('column') && !x.includes('row'))[index];

  var width = document.getElementById('chart'+index).offsetWidth;
  var height = document.getElementById('chart'+index).offsetHeight;

      runDim = ndx.dimension(function(d) { return [ +d.row, +d.column, +d[holder+'_TT'] ]; }),
      runGroup = runDim.group().reduceSum(function(d) { return +d[holder]; });
  chart
    .width(width)
    .height(height)
    .dimension(runDim)
    .group(runGroup)
    .keyAccessor(function(d) { return [ +d.key[0],  ] ; })
    .valueAccessor(function(d) { return +d.key[1]; })
    .colorAccessor(function(d) { return +d.value; })
    .title(function(d) {
        //return "Value: " + d.key[0] + ","+ d.key[1] + " : " + d.key[2]; 
        return "Value : "+ d.key[2];
      })
    // .addFilterHandler(function (filters, filter) {
    //     filters.push(filter);
    //     console.log(filters)
    //     return filters;
    // })
    // .boxOnClick(function (d) {
    //   console.log(d.key)
    //     var filter = d.key;
    //     dc.events.trigger(function () {
    //         chart.filter(filter);
    //         chart.redrawGroup();
    //     });
    // })
    .on('pretransition', function(chart) {
        chart.selectAll('g.axis text').attr("fill", "white").style("font-size", "0px")
      }) 
    .colors(['#000080', '#000092', '#0000a4', '#0000b7', '#0000c9', '#0000db', '#0000ee', '#0000ff', '#0002ff', '#0012ff', '#0022ff', '#0033ff', '#0043ff', '#0053ff', '#0063ff', '#0073ff', '#0084ff', '#0094ff', '#00a4ff', '#00b4ff', '#00c4ff', '#00d4ff', '#00e5f7', '#0cf5ea', '#19ffdd', '#27ffd0', '#34ffc3', '#41ffb6', '#4effa9', '#5bff9c', '#68ff8f', '#75ff82', '#82ff75', '#8fff68', '#9cff5b', '#a9ff4e', '#b6ff41', '#c3ff34', '#d0ff27', '#ddff19', '#eaff0c', '#f7f500', '#ffe600', '#ffd700', '#ffc800', '#ffb900', '#ffaa00', '#ff9b00', '#ff8c00', '#ff7d00', '#ff6e00', '#ff5f00', '#ff5000', '#ff4100', '#ff3200', '#ff2300', '#ff1400', '#ee0500', '#db0000', '#c90000', '#b70000', '#a40000', '#920000', '#800000'])
    .xBorderRadius(0)
    .yBorderRadius(0)
    .calculateColorDomain();

    if (index == Object.keys(data[0]).filter(x => !x.includes('_TT') && !x.includes('column') && !x.includes('row') ).length-1 ){ dc.renderAll(); 
    }
  });

function HeatMap(event){

console.log(runDim.top(Infinity));

  // setTimeout( () => { 
  //   $('.dcjs').each(function(index, obj) {
  //     if (obj != event){
  //       $(obj).find('.box-group').each(function(indexStep, objStep) {
  //         if ($(objStep).find('rect').attr('fill') == "rgb(0, 0, 128)" ){
  //             $(objStep).addClass("deselected");
  //         }
  //       })
  //     }
  //   }); 
  // }, 500);

}
// d3.csv("morley.csv").then(function(experiments) {

// });

How do I override the crossfiltered applied dark blue color for other heatmaps to the same #CCC unselected color?

Вот скрипка для следующей проблемы: https://jsfiddle.net/Vivek_Raju/ndeuzxmt/


dc.js crossfilter
person vivek raju    schedule 30.10.2019    source источник
comment
Найдите правило CSS, которое в настоящее время отвечает за придание ему синего цвета. Напишите новое правило CSS, содержащее нужный вам цвет. Убедитесь, что у него более высокий приоритет, чем у исходного правила.   -  person Shilly    schedule 30.10.2019
comment
это хакерское решение @Shilly. Согласно документам, вы можете обновлять цвета с помощью colorMixins. dc-js.github.io/dc.js/ docs / html / dc.colorMixin.html   -  person Dhananjai Pai    schedule 30.10.2019
comment
@vivek поделится jsfiddle, чтобы людям было проще опробовать решения. Вы можете попробовать это сами из приведенного выше документа   -  person Dhananjai Pai    schedule 30.10.2019
comment
@DhananjaiPai Это действительно хакерское решение. Иногда я ошибочно предполагаю, что люди, использующие библиотеку, уже искали в своих документах готовые решения своей проблемы. ;)   -  person Shilly    schedule 30.10.2019
comment
В этом примере используется другой цвет. для фильтрации в тепловой карте по сравнению с фильтрацией на другой диаграмме, но я думаю, что это дает правильную идею - если использование scaleLinear просто гарантирует, что ноль соответствует желаемому цвету.   -  person Gordon    schedule 30.10.2019
comment
ссылка Вот скрипт для следующей проблемы @Gordon   -  person vivek raju    schedule 30.10.2019
comment
@DhananjaiPai Я понимаю, что цвет, связанный с наименьшим значением, окажется цветом, отфильтрованным фоном для остальных тепловых карт, но я не хочу использовать #ccc. Таким образом, этот цвет не отображается ни на какое значение. Как мне представить ColorMixins?   -  person vivek raju    schedule 30.10.2019

Ответы (2)


arrow_upward
1
arrow_downward

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

Во-первых, если у вас есть две диаграммы dc.js для одних и тех же данных, вы почти всегда хотите, чтобы они были в одном измерении. Это потому, что вы не хотите, чтобы они фильтровали друг друга, и группа не соблюдает фильтры собственного измерения.

Итак, давайте переместим измерение из цикла и используем его для обеих диаграмм:

const keys = Object.keys(data[0]).filter(x => !x.includes('_TT') && !x.includes('column') && !x.includes('row'));

const runDim = ndx.dimension(function(d) {
  return [+d.row, +d.column]; //, +d[holder + '_TT']];
});
keys.forEach(function(i, index) {

(Я также поместил ключи в переменную, потому что моему мозгу было больно видеть повсюду это огромное выражение. Я также dc.redrawAll() вышел из цикла.)

Способ установки фильтров в dc.js довольно своеобразен. Вот конкретный вопрос о формате, необходимом для программного изменения фильтра тепловой карты:

Heatmap DC.js - как отфильтровать несколько элементов вручную

Копировать фильтры из одной диаграммы в другую можно так:

var guard = false;
function filter_listener(i) {
  return function(chart) {
    if(guard) return; // avoid infinite recursion
    var filters = chart.filters().map(f => dc.filters.TwoDimensionalFilter([f[0],f[1]]));
    console.log(i, filters);
    guard = true;
    charts.forEach((chart2, j) => {
      if(j == i) return;
      chart2._filter(null);
      if(filters.length) chart2._filter([filters])
    });
    guard = false;
  }
}

charts.forEach((chart, i) => chart.on('filtered.sync', filter_listener(i)))

Обычно прослушиватель фильтра сначала проверяет, не является ли он источником текущих фильтров, чтобы избежать бесконечной рекурсии.

Затем он скопирует фильтры и перебирает все диаграммы.

Если текущая диаграмма не сама по себе, фильтр будет сброшен, а если список фильтров не пуст, он установит фильтры на другой диаграмме.

Обратите внимание на использование ._filter(), потому что, как указано в процитированном вопросе, тепловая карта имеет странное переопределение .filter(), которое не позволяет нам устанавливать сразу несколько фильтров. Также обратите внимание на массив массивов фильтров. Вот это да.

Вот рабочая скрипка.

person Gordon    schedule 01.11.2019

arrow_upward
0
arrow_downward

Как объяснено в комментариях выше, вам необходимо указать цвет для нулевого значения, который будет соответствовать невыбранному цвету.

Вы уже используете смесь цветов; он определяет метод .colors().

В настоящее время у вас есть

 .colors(['#000080', '#000092', // ...

#000080 - ваш темно-синий цвет, поэтому измените его на #ccc или как хотите:

 .colors(['#ccc', '#000092', // ...

Согласно правилам стиля по умолчанию, невыделенный элемент также будет иметь непрозрачность 0,5, поэтому он не будет выглядеть того же цвета. Вы можете восстановить непрозрачность 1 в своем собственном CSS, а также изменить невыделенный цвет, если вам нужно что-то помимо значения по умолчанию #ccc:

.dc-chart .box-group.deselected rect.heat-box {
  fill-opacity: 1;
  /* fill: #ccc; */
}

Вилка вашей скрипки.

person Gordon    schedule 30.10.2019
comment
Привет, @Gordon, я не хочу добавлять #ccc в область цветов, потому что это изменит цветовое сопоставление для набора данных и в конечном итоге нарушит его цель. Теперь допустим, что в разветвленной скрипке я выбрал прямоугольный тепловой ящик с цветом #ccc. В этом сценарии поля с цветом #ccc будут практически невидимы, даже если кросс-фильтр выберет значение для его отображения. Могу ли я не добавить #ccc в палитру цветов и по-прежнему иметь возможность делать то, что делает ваша разветвленная скрипка? Спасибо. - person vivek raju; 31.10.2019
comment
Кроме того, если выбрано несколько полей на первой тепловой карте, и мы продолжаем выбирать поле на второй тепловой карте, для всех ранее выбранных цветов по умолчанию используется темно-синий цвет (в моем случае [fiddle]) или #ccc (в ваш случай [скрипка]). Как мне исправить эту проблему? Спасибо. - person vivek raju; 31.10.2019
comment
Похоже, у вас есть две диаграммы, отображающие одни и те же данные, и вы хотите, чтобы выбор между ними был синхронизирован. Также вы хотите, чтобы одновременно выбиралось только одно поле. Это лучшее описание проблемы? - person Gordon; 31.10.2019
comment
Прошу прощения, если я не совсем понял мою проблему. Да, вы правы, и я использую один и тот же набор данных для отображения или рисования нескольких тепловых карт. Я хотел бы иметь возможность выбрать несколько полей и синхронизировать их с другими тепловыми картами, имея в виду, что цвет #ccc должен отражаться на других диаграммах, не указывая его в палитре цветов. Кроме того, если бы я мог реализовать селектор ящиков на тепловой карте, который позволяет мне выбирать сразу несколько ящиков и отображать соответствующие поля на других тепловых картах, было бы полезно. - person vivek raju; 01.11.2019
comment
Да, если вы синхронизируете выделение, это позволит сохранить одинаковые цвета. Я могу придумать ответ сегодня позже. Похоже, вы действительно хотите, чтобы множественный выбор был по умолчанию на тепловой карте, но у него есть ужасные побочные эффекты, когда выборки не синхронизированы. - person Gordon; 01.11.2019