2016-04-11 15 views
1

dc.js'de bir ısı haritasının kutu grubuna metin yerleştirmenin bir yolu var mı? böylece bilgi kutuda bir gezinti yapmadan okunabilir mi?Metin haritasının içindeki ısı değiştirgesini ekle 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(); 

ve sonuç:

Result

Bütçe başlık özelliğinde kutusundan okunabilir değil olacağını gerekir.

Teşekkür ederiz!

cevap

1

Başlığı eklemek yerine metin öğesini ekleyin, aşağıdaki kodu deneyin. Eğer işe yaramazsa bir plnkr bağlantısı koyun. Sorunu çözmene yardımcı olabilirim. Metin öğesini ekleme hakkında daha fazla bilgi edinmek için this link'a bakın.

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

Bu db.js değil ve düz d3.js olduğundan, biraz daha fazla yapmanız gerekecek, ancak bu temel olarak doğru fikirdir. Eğer her şeyi ".append" 'in sonuna, eğer .on (' pretransition ', function (chart) {chart.selectAll (' rect.heat-box ') ...}) 'dırsanız . (Ayrıca, röleler zaten doğru yerde olduğundan koordinatları da basitleştirebilirsiniz.) – Gordon

İlgili konular