我有一个与dc.js数据表相关的基本问题。我创建了一个包含3列的数据表,包括州名,meanQRT和study。
如何根据其值对第二列进行着色而不对其进行排序。例如,最低的meanQRT值将为红色,最高的将为绿色,值范围为-1到1.
我也不认为这也是硬编码颜色值的好选择。
目前,我已使用meanQRT值对表格进行了排序,并将表格百分比分配给rgb颜色
我不想按特定颜色对代码进行硬编码。因为我的数据中有96行,所以我希望根据它们的增加值,从红色到绿色渐变的所有行给出不同的颜色,表中的数据没有排序。
dc.dataTable("#rbm-data-table", "newView")
.dimension(stateName)
.group(function (d) {
return "Country " + ": " + d.Country;
})
.size(96)
.columns([
function (d) {
return d.State;
},
function (d) {
return d.meanQRT;
},
function (d) {
return d.Study;
}
])
.order(d3.descending)
/*
.sortBy(function (d) {
return d.meanQRT;
})*/
.renderlet(function(table){
table.selectAll('.dc-table-group').classed("info", true);
colorCode();
});
dc.renderAll("newView");
function colorCode(){
function percentToRGB(percent) {
if (percent === 100) {
percent = 99;
}
var r, g, b;
if (percent < 50) {
// green to yellow
r = Math.floor(255 * (percent / 50));
g = 255;
} else {
// yellow to red
r = 255;
g = Math.floor(255 * ((50 - percent % 50) / 50));
}
b = 0;
return "rgb(" + r + "," + g + "," + b + ")";
}
function render(i) {
//$('.dc-table-row:nth-child('+ i +')').css('background-color', percentToRGB(i));
$('.dc-table-row:nth-child('+ i +') td:nth-child(2)').css('background-color', percentToRGB(i));
$('.dc-table-row:nth-child('+ i +') td:nth-child(3)').css('background-color', percentToRGB(i));
}
function repeatColor(fn, times) {
for (var i = 0; i < times; i++) {
fn(i);
}
}
var colorCount = 96;
repeatColor(render, colorCount);
}
谢谢。