javascript - 在热图 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) + " $";}); });