dc.js数据表着色

时间:2015-03-26 12:18:06

标签: javascript d3.js dc.js

我有一个与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);

    }

谢谢。

0 个答案:

没有答案