Javascript D3.js设置高亮显示表格的样式

我正在使用D3.js创建一个突出显示的表（下面链接中的第11个表）

到目前为止，我已经成功地将给定数组解析为HTML表，并为特定行选择颜色。现在我必须根据它所持有的数据值来改变颜色的深度

比如说。这是一个保存学生成绩的数组

    ['john', 10, 30, 40, 40,55 , 36, 74, 39, 29],
    ['Alex', 32, 22, 33, 24,35 , 36, 57, 28, 29],
    ['Mark', 34, 13, 43, 43,25 , 46, 67, 48, 59],
    ['Jane', 44, 25, 33, 24,15 , 26, 74,48, 59],
    ['Tina', 55, 62, 53,44,53 , 56,47, 83, 92],
    ['Lane', 67, 23, 23, 34,56 , 26, 77, 78, 79],
    ['Barry', 87, 42, 53, 84,75 , 66, 75, 28, 91],
    ['Clark', 88, 62, 37, 44,53 , 46, 73, 28, 19],
    ['Cisco', 97, 26, 63, 44,35 , 62, 27, 82, 19]

var rowLabel = ['-', 'Math', 'Science', 'History', 'English', 'IT', 'Health', 'Social','Politics', 'Physics'];

我需要绿色来随“数学”分数变化。也就是说，整个数学列应该是绿色的，最高的学生应该是深绿色，最低的学生应该是浅绿色，以此类推。该过程也应重复到其他列。我正在补充我所做的工作。有人能帮我吗

var dummy = [

    ['john', 10, 30, 40, 40,55 , 36, 74, 39, 29],
    ['Alex', 32, 22, 33, 24,35 , 36, 57, 28, 29],
    ['Mark', 34, 13, 43, 43,25 , 46, 67, 48, 59],
    ['Jane', 44, 25, 33, 24,15 , 26, 74,48, 59],
    ['Tina', 55, 62, 53,44,53 , 56,47, 83, 92],
    ['Lane', 67, 23, 23, 34,56 , 26, 77, 78, 79],
    ['Barry', 87, 42, 53, 84,75 , 66, 75, 28, 91],
    ['Clark', 88, 62, 37, 44,53 , 46, 73, 28, 19],
    ['Cisco', 97, 26, 63, 44,35 , 62, 27, 82, 19]

];
var rowLabel = ['-', 'Math', 'Science', 'History', 'English', 'IT', 'Health', 'Social','Politics'];


//should use HEX but I have used name for the convenience 
    var colors = ['red', 'green', 'blue', 'yellow', 'orange', 'purple', 'grey', 'brown', 'violet', 'cyan'];



var table = d3.select("body").append("table");

thead = table.append("thead");
tbody = table.append("tbody")


thead.append("tr")
    .selectAll("th")
    .data(rowLabel)
    .enter()
    .append("th")
    .text(function(d){
        return d;
    })

var rows = tbody.selectAll("tr")
    .data(dummy)
    .enter()
    .append("tr");

var cells = rows.selectAll("td")
            .data(function(d,i){
                //d.shift();
                //d.unshift(rowLabel[i]);
                return d;
            })
            .enter()
            .append("td")
            .text(function(d){
                return d;
            })
            .style('background-color',function(d,i){
                return colors[i];
            });

---

有很多方法可以做到这一点，但我的解决方案使用RGBA颜色，并根据数据值改变Alpha通道（基本上是不透明度）。在这里拉小提琴：

我首先以RGB格式重新定义了颜色数组，如下所示：

// Using RBG
var colors = [
    {r: 255, g: 0, b: 0},
    {r: 0, g: 255,  b: 0}, 
    {r: 0, g: 0, b: 255},
    ...
]

.style('background-color', function (d, i) {
    return 'rgba(' + colors[i].r + ',' + colors[i].g + ',' + colors[i].b + ',' + alpha(d) + ')';
})

接下来定义了一个简单的

alpha

函数，将标记（可能是0-100）作为域转换为0到1之间的范围：

var alpha = d3.scale.linear().domain([0, 100]).range([0, 1]);

最后，单元格的

背景色

样式现在定义如下：

// Using RBG
var colors = [
    {r: 255, g: 0, b: 0},
    {r: 0, g: 255,  b: 0}, 
    {r: 0, g: 0, b: 255},
    ...
]

.style('background-color', function (d, i) {
    return 'rgba(' + colors[i].r + ',' + colors[i].g + ',' + colors[i].b + ',' + alpha(d) + ')';
})

我们将计算出的Alpha值附加到

colors

数组中的RGB值，以返回正确的RGBA

---

快速提示：如果您只是尝试使用

.style（'opacity…

）来改变单元格的不透明度，您会发现它会影响背景颜色和文本，这是您不想要的！

Genius。这解决了问题。非常感谢您花时间。非常感谢。：）还有一个问题，如果某列中的标记与另一列中的标记不在同一范围内，该怎么办。（例如，0-20）有什么方法可以动态设置刻度范围吗？使用数据数组和可选访问器（请参阅），使用

alpha.domain（d3.extent（…））

可以轻松设置和更改域。但我还没有想到一种简单的方法来定义每列（相对于每表行或整个数据集，两者都更容易！）。也许值得单独问一个问题我已经想出了一个临时的解决办法。成功了。但我对此并不满意。也许我应该单独问一个问题。