CODEWITHSUNDEEP
javascriptd3.jsheatmapdc.js
S.BM
S.BM

Reputation: 127

add Text inside the Boxgroup in heat map dc.js

is there a way to put a text inside the box group of a heat map in dc.js ? so that the information is readable without making a hover on the box ? 

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();

and the result :

Result

I need that the Budget will be readable from the box and not in the title property.

Thank you!

Upvotes: 1

Views: 820

Answers (1)

somename
somename

Reputation: 998

Instead of appending the title add the text element try the following code. If it doesn't work put a plnkr link. I can probably help you to figure out the issue. Look at this link to understand more about adding the text element.

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

Upvotes: 2

Related Questions