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

Question

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

[
  {
    "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) {

// });

Как переопределить примененный кроссфильтрованный темно-синий цвет для других тепловых карт к тому же #CCC невыбранному цвету?

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

Answer 1

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

Прежде всего, если у вас есть две диаграммы 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)))

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

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

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

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

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

Answer 2

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

Вы уже используете сочетание цветов;он определяет метод .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; */
}

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