ヒートマップ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

titleを追加する代わりに、次のコードを試してみてください。それが動作しない場合は、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) + " $";}); });