我正在尝试将热图添加到DC / Crossfilter仪表板。我想看到的是一条水平矩形的小矩形，水平线的颜色取决于交易回报是正数还是负数，颜色为绿色，这是遵循交易顺序的。
因此，我在弄清楚如何将颜色与交易价值相关联时遇到了麻烦（试图使用类型文本“ Profit” /“ Loss”字段，但也无法弄清楚）。以下是我目前所处的位置，但似乎得到的回报的前半部分是绿色，下半部分是红色。因此停留在将颜色与价值联系起来的机制上。也可能有一个我想与正值匹配的奇零值。
我只是这里的业余爱好者，所以没有足够的知识，并且阅读了很多查询，几乎可以到达那里，但最终让我意识到了我不知道的程度。因此，在我进一步前进的过程中，这里的任何帮助将不胜感激。
这里是Fiddle
欢呼声
Fred
这是我的代码
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().reduceCount(function(d){ return d.type; });
var barChart = dc.heatMap('#heatMap')
.width(1024)
.height(250)
.dimension(dimensionByType)
.group(groupByType)
.title(function(d){ return "Total Payment: $" + d.key + " => Tip: $" +d.value; })
.xBorderRadius([25])
.yBorderRadius([25])
.colors(["steelblue","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>dc.js是围绕许多“访问器”和“比例尺”构建的。