Javascript D3 js在中选择矩形

我正在尝试使用D3JS库v3生成热图。 当试图在矩阵上映射数据时，数据的映射是垂直进行的，但我需要数据的水平映射。有关预期输出，请参阅所附图像

var数据=[
{分数：0.5，行：0，列：0}，
{分数：0.7，行：0，列：1}，
{分数：0.2，行：0，列：2}，
{分数：0.4，行：1，列：0}，
{分数：0.2，行：1，列：1}，
{分数：0.4，行：1，列：2}，
{分数：0.4，行：2，列：0}，
{分数：0.2，行：2，列：1}，
{分数：0.4，行：2，列：2}
];
//热图中每行的高度
//热图中每列的宽度
var gridSize=50，
h=网格大小，
w=网格大小，
平均值=60；
变量colorLow='绿色'，colorMed='黄色'，colorHigh='红色'；
var margin={顶部：20，右侧：80，底部：30，左侧：50}，
宽度=640-margin.left-margin.right，
高度=380-margin.top-margin.bottom；
var colorScale=d3.scale.linear（）
.domain（[-1,0,1]）
.范围（[colorLow、colorMed、colorHigh]）；
var svg=d3。选择（“热图”）。追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var heatMap=svg.selectAll（“.heatMap”）
.data（数据，函数（d）{return d.col+'：'+d.row；}）
.enter（）.append（“svg:rect”）
.attr（“x”，函数（d）{返回d.row*w；}）
.attr（“y”，函数（d）{返回d.col*h；}）
.attr（“宽度”，函数（d）{return w；}）
.attr（“高度”，函数（d）{return h；}）
.style（“fill”，函数（d）{return colorScale（d.score）；}）；
var textable=svg.selectAll（“.bartext”）
.数据（数据）；
textLable.exit（）.remove（）；
textable.enter（）
.append（“文本”）
.attr（“类”、“bartext”）
.attr（“y”，函数（d）{返回d.col*h*1.2；}）
.attr（“x”，函数（d）{返回d.row*w*1.2；}）
.attr（“高度”，函数（d）{return h；}）
.style（“文本锚定”、“中间”）
.文本（功能（d，i）{
返回i；
});
在热图变量中，您将X坐标设置为等于行乘以宽度，这意味着较高的行将具有较高的X坐标，其中应具有较高的Y坐标。交换这些，以使代码按您的需要工作

.attr("x", function(d) { return d.col * h; })
.attr("y", function(d) { return d.row * w; })

只需交换
x
和
y
。