D3.js设置突出显示的表格的样式
D3.js Styling a highlighted Table
我正在使用D3创建一个突出显示的表(以下链接中的第11个表.jshttp://www.tableau.com/sites/default/files/media/which_chart_v6_final_0.pdf
到目前为止,我已经设法将给定的数组解析为 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 通道(本质上是不透明度)。在这里小提琴:http://jsfiddle.net/henbox/6yp93hp0/1/
我首先以 RGB 格式重新定义了您的颜色数组,如下所示:
// Using RBG
var colors = [
{r: 255, g: 0, b: 0},
{r: 0, g: 255, b: 0},
{r: 0, g: 0, b: 255},
...
]
接下来定义了一个简单的alpha
函数,将标记(大概是 0 - 100)作为域转换为 0 到 1 之间的范围:
var alpha = d3.scale.linear().domain([0, 100]).range([0, 1]);
最后,单元格的background-color
样式现在定义如下:
.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...
来改变单元格的不透明度,您会发现它会影响背景颜色和文本,这是您不希望的!
相关文章:
- 当包含另一个asp文件时,是否也包含所有引用的样式和脚本页面
- 将样式表插入iframe
- 检测价格是否高于或低于200.00,然后设置(此)表格行的样式
- 具有固定顶行和左列的Excel样式HTML表格的更好实现?(jsFiddle 示例)
- D3.js设置突出显示的表格的样式
- 带有样式显示的 Div:表格的高度错误
- 仅在一个表格行内设置单选按钮标签的样式
- 循环遍历数组并以表格样式显示结果
- 隐藏具有挖空样式绑定的表格行
- 样式标题工具提示在表格中不起作用
- 使用CSS设置表格样式
- 如何在点击表格时更改css样式
- Tinymce编辑器删除所有样式,但保留项目符号和表格,同时粘贴文本
- 如何换锚当它's在表格单元格使用jquery样式
- 如何转换表格td内联样式宽度pt以转换百分比以适合响应
- Javascript选择表格中的单元格套索样式
- 使用按钮/jquery改变表格的CSS样式
- 如何在 AngularJS 中展开表格以手风琴样式添加更多信息
- 表格行的显示样式与标题保持对齐
- 如何使用jQuery复制excel样式的表格单元格