Javascript 在heat map dc.js中的框组内添加文本

在dc.js中，有没有办法将文本放入热图的框组中？ 这样信息就可以读取，而无需在框上悬停

var ndx2 = crossfilter(budgetsArr);

 var budgetDimension = ndx2.dimension(function(d) {return [+d.account, +d.year]; });
 var  budgetGroup = budgetDimension.group().reduceSum(function(d) { return +d.budget; });



  chart
    .width(45 * 20 + 80)
    .height(45 * 5 + 40)
    .dimension(budgetDimension)
    .group(budgetGroup)

    .keyAccessor(function(d) { return +d.key[0]; })
    .valueAccessor(function(d) { return +d.key[1]; })
    .colorAccessor(function(d) { return +d.value; })
    .title(function(d) {
        return "Account:   " + d.key[0] + "\n" +
               "Year :  " + d.key[1] + "\n" +
               "Budget: " + (d.value) + " $";})
    .colors(["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"])

    .calculateColorDomain(); 

结果是：

我需要的是，预算将是可读的框，而不是在标题属性

---

谢谢大家!

尝试以下代码，而不是添加标题添加文本元素。如果不起作用，请安装plnkr链接。我也许能帮你解决这个问题。查看以了解有关添加文本元素的更多信息

 chart
.width(45 * 20 + 80)
.height(45 * 5 + 40)
.dimension(budgetDimension)
.group(budgetGroup)

.keyAccessor(function(d) { return +d.key[0]; })
.valueAccessor(function(d) { return +d.key[1]; })
.colorAccessor(function(d) { return +d.value; })
.append("text")
.attr("x", function(d) { return x(d.value) - 3; })
.attr("y", d.value/ 2)
.attr("dy", ".35em")
.text(function(d) { return "Account:   " + d.key[0] + "\n" +
       "Year :  " + d.key[1] + "\n" +
       "Budget: " + (d.value) + " $";}); });

---

因为这是dc.js，而不是直接的d3.js，所以您需要做更多的工作，但这基本上是正确的想法。如果您只是将

.append

中的所有内容包装到

.on（'pretransition'，function（chart）{chart.selectAll（'rect.heat box'）…}）

中的末尾，那就差不多了。（我认为您还可以简化坐标，因为矩形已经位于正确的位置。）