在热图 dc.js 中的 Boxgroup 内添加文本

Question

有没有办法将文本放在 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(); 

结果：

我需要可以从框中读取预算，而不是在 title 属性中。

谢谢！

Answer 1

尝试以下代码，而不是附加标题添加文本元素。如果它不起作用，请放置一个 plnkr 链接。我可能可以帮助您找出问题所在。查看this link 以了解有关添加文本元素的更多信息。

 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) + " $";}); });