d c. js построено на множестве «аксессоров» и «весов».
«Аксессоры» берут групповую корзину (пара {key,value}) и возвращают некоторое полезное значение.
«Весы» (концепция D3) принимают значение и сопоставляют его с некоторой визуальной кодировкой, такой как цвет, X или Y.
Тепловая карта использует
keyAccessor и частный d3.scaleBand для X valueAccessor и частный d3.scaleBand для Y colorAccessor и шкала .colors() для цвета.
В вашем случае вы хотите
использовать sequence для X
.keyAccessor(d => d.key)
для использования 0 (или любого постоянного значения) для Y
.valueAccessor(d => 0)
для использования rturn или type для средства доступа к цвету и цветовой шкалы который отображает прибыль в зеленый и убыток в красный
Вы используете sequence для измерения; d.key.
Группа перекрестных фильтров объединяет все строки, попадающие в ячейку, назначенную ключом.
Простой способ увидеть прибыль или убыток - reduceSum использование rturn:
var groupByType = dimensionByType.group().reduceSum(row => row.rturn);
В каждой последовательности только одна строка, поэтому она просто проходит через rturn. Теперь у d.value будет row.rturn, и мы можем указать colorAccessor, чтобы решить, будет ли это прибыль или убыток, основываясь на знаке:
.colorAccessor(d => d.value >= 0 ? 'Profit' : 'Loss')
и использовать порядковый масштаб для присвоения прибыли зеленому и красный к потере:
.colors(d3.scale.ordinal().domain(['Profit', 'Loss']).range(["green","red"]))
Есть много других способов сделать это, используя type или другие цветовые шкалы, но я думаю, это самое простое, и оно все еще работает, если ваши контейнеры тепловых карт агрегированы.
var transactions = [
{date: "2020-01-23T11:15:11Z", sequence: 1, rturn: -280.00, type: "Loss"},
{date: "2020-01-23T11:22:19Z", sequence: 2, rturn: -43.75, type: "Loss"},
{date: "2020-01-23T11:28:47Z", sequence: 3, rturn: -4.05, type: "Loss"},
{date: "2020-01-23T11:33:26Z", sequence: 4, rturn: 9.47, type: "Profit"},
{date: "2020-01-23T11:50:34Z", sequence: 5, rturn: 0.11, type: "Profit"},
{date: "2020-01-23T11:53:40Z", sequence: 6, rturn: 16.46, type: "Profit"},
{date: "2020-01-23T12:16:34Z", sequence: 7, rturn: 19.23, type: "Profit"},
{date: "2020-01-23T12:24:03Z", sequence: 8, rturn: 26.65, type: "Profit"},
{date: "2020-01-23T12:38:19Z", sequence: 9, rturn: 7.70, type: "Profit"},
{date: "2020-01-23T13:12:50Z", sequence: 10, rturn: 9.80, type: "Profit"},
{date: "2020-01-23T13:27:43Z", sequence: 11, rturn: -15.58, type: "Loss"},
{date: "2020-01-23T13:35:45Z", sequence: 12, rturn: 6.18, type: "Profit"}
];
var facts = crossfilter(transactions);
var dimensionByType = facts.dimension(function(d){ return d.sequence; });
var groupByType = dimensionByType.group().reduceSum(row => row.rturn);
var heatMap = dc.heatMap('#heatMap')
.width(1024)
.height(250)
.dimension(dimensionByType)
.group(groupByType)
.keyAccessor(d => d.key)
.valueAccessor(d => 0)
.colorAccessor(d => d.value >= 0 ? 'Profit' : 'Loss')
.title(function(d){ return "Total Payment: $" + d.key + " => Tip: $" +d.value; })
.xBorderRadius([25])
.yBorderRadius([25])
.colors(d3.scale.ordinal().domain(['Profit', 'Loss']).range(["green","red"]))
//.calculateColorDomain();
dc.renderAll();
<!DOCTYPE html>
<html lang="EN">
<head>
<meta charset="utf-8">
<title>Heat Map</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.1/d3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.9/dc.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.9/dc.min.css" />
</head>
<body>
<h1>Transactions Result Sequence</h1>
<div id="heatMap"></div>
</body>
</html>