保持两个热图之间的选择同步
keeping the selection in sync between two heatmaps
我正在根据下面给出的示例数据集构建多个热图。
[
{
"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
}];
当我 select 来自热图的单元格时，除了 selected 单元格之外，所有其他单元格都默认为 #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 unselected 颜色？
这是针对以下问题的 fiddle：https://jsfiddle.net/Vivek_Raju/ndeuzxmt/
如上面的评论所述，您需要为零值指定一种颜色，以匹配取消选择的颜色。
您已经在使用混色；它定义了 .colors() 方法。
目前你有
.colors(['#000080', '#000092', // ...
#000080 是您的深蓝色，因此将其更改为 #ccc 或您想要的任何颜色：
.colors(['#ccc', '#000092', // ...
在默认样式规则下，取消选择的项目的不透明度也为 0.5，因此看起来颜色不同。您可以在自己的 CSS 中恢复不透明度 1，如果您想要默认值以外的颜色，还可以更改取消选择的颜色 #ccc:
.dc-chart .box-group.deselected rect.heat-box {
fill-opacity: 1;
/* fill: #ccc; */
}
在评论中讨论后，我们意识到问题不在于颜色，而在于保持两个热图之间的选择同步。
首先，如果您在同一数据上有两个 dc.js 图表，您几乎总是希望它们在同一维度上。这是因为您不希望它们相互过滤，并且 a group does not observe its own dimension's filters.
所以让我们将维度移出循环并将其用于两个图表：
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) {
（我还把 keys 放在了一个变量中，因为到处都是那个巨大的表情让我的大脑很受伤。我也把 dc.redrawAll() 移出了循环。）
在 dc.js 中设置过滤器的方式非常特殊。这是一个专门关于以编程方式更改热图过滤器所需格式的问题：
Heatmap DC.js - how to filter multiple items manually
可以这样将过滤器从一个图表复制到其他图表：
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() 覆盖，这会阻止我们一次设置多个过滤器。还要注意过滤器数组的数组。哇哦
我正在根据下面给出的示例数据集构建多个热图。
[
{
"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
}];
当我 select 来自热图的单元格时，除了 selected 单元格之外，所有其他单元格都默认为 #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 unselected 颜色？
这是针对以下问题的 fiddle：https://jsfiddle.net/Vivek_Raju/ndeuzxmt/
如上面的评论所述，您需要为零值指定一种颜色，以匹配取消选择的颜色。
您已经在使用混色；它定义了 .colors() 方法。
目前你有
.colors(['#000080', '#000092', // ...
#000080 是您的深蓝色，因此将其更改为 #ccc 或您想要的任何颜色：
.colors(['#ccc', '#000092', // ...
在默认样式规则下，取消选择的项目的不透明度也为 0.5，因此看起来颜色不同。您可以在自己的 CSS 中恢复不透明度 1，如果您想要默认值以外的颜色，还可以更改取消选择的颜色 #ccc:
.dc-chart .box-group.deselected rect.heat-box {
fill-opacity: 1;
/* fill: #ccc; */
}
在评论中讨论后，我们意识到问题不在于颜色，而在于保持两个热图之间的选择同步。
首先，如果您在同一数据上有两个 dc.js 图表，您几乎总是希望它们在同一维度上。这是因为您不希望它们相互过滤，并且 a group does not observe its own dimension's filters.
所以让我们将维度移出循环并将其用于两个图表：
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) {
（我还把 keys 放在了一个变量中，因为到处都是那个巨大的表情让我的大脑很受伤。我也把 dc.redrawAll() 移出了循环。）
在 dc.js 中设置过滤器的方式非常特殊。这是一个专门关于以编程方式更改热图过滤器所需格式的问题：
Heatmap DC.js - how to filter multiple items manually
可以这样将过滤器从一个图表复制到其他图表：
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() 覆盖，这会阻止我们一次设置多个过滤器。还要注意过滤器数组的数组。哇哦