如何为object数组中的每个元素设置d3色标？
如何为object数组中的每个元素设置d3色标？
提问于 2016-01-25 14:10:51
我正在使用d3为对象数组生成一个HTML表。我想要颜色的背景与渐变级别取决于值范围。
我使用了应用于无渐变的列的category10域比例颜色。有没有办法指定最小最大值为d3并设置渐变。这是我得到的结果，我需要使发动机扭矩的线性值与梯度和分类发动机类型不同的颜色取决于值
数据数组如下所示
[{ EngineType="Piston", torque=10, rpm=1}, { EngineType="Piston", torque=10, rpm=1}]Javascript代码
var color = d3.scale.category10()
.domain([d3.min(data), d3.max(data)]);
var rows = d3.select('tbody')
.selectAll('tr')
.data(data, function(d) { return d[config.key]})
var entertd = rows.enter()
.append('tr')
.selectAll('td')
.data(function(d) { return d3.map(d).values() })
.enter()
.append('td')
.attr('bgcolor',color)
entertd.append('span')
var td = rows.selectAll('td')
.style({"padding": "0px 10px 0px 10px"})
.data(function(d) { return d3.map(d).entries() })
.attr('class', function (d) { return d.key })
td.select('span')
.text(function(d) {
return d.value
})fiddle中的类似场景
回答 2
Stack Overflow用户
发布于 2016-01-25 15:05:26
如果我理解正确的话，您希望将颜色从category10()转换为基于此颜色的渐变。
如果是这样的话：
- 你可以使用函数
.ColorLuminance()Ihere来获得更亮的颜色，这样我们就可以通过这两种颜色来创建渐变。- 像你一样使用
.attr()将背景设置为渐变，但不要使用bgcolor，而是像这样设置style:backougrnd：
- 像你一样使用
完整代码：
function tabulate(data, columns) {
var table = d3.select("#container").append("table"),
thead = table.append("thead"),
tbody = table.append("tbody");
// append the header row
thead.append("tr")
.selectAll("th")
.data(columns)
.enter()
.append("th")
.text(function(column) { return column; });
// create a row for each object in the data
var rows = tbody.selectAll("tr")
.data(data)
.enter()
.append("tr");
//Color scale
var color = d3.scale.category10()
.domain([d3.min(data), d3.max(d3.values(data))]);
// create a cell in each row for each column
var cells = rows.selectAll("td")
.data(function(row) {
return columns.map(function(column) {
return {column: column, value: row[column]};
});
})
.enter()
.append("td")
.text(function(d) { return d.value; }).attr('style','background:linear-gradient(to bottom, ' + color(0) + ' 0%,' + ColorLuminance(color(0), 0.5) + ' 100%)');
return table;
}
var people = [
{EngineType: "Rotary", torque: 30, rpm: 21},
{EngineType: "Piston", torque: 32, rpm: 23},
{EngineType: "Rotary", torque: 29, rpm: 21},
{EngineType: "Piston", torque: 31, rpm: 12}
];
// render the table
var peopleTable = tabulate(people, ["EngineType", "torque", "rpm"]);
// uppercase the column headers
peopleTable.selectAll("thead th")
.text(function(column) {
return column.charAt(0).toUpperCase() + column.substr(1);
});
// sort by age
peopleTable.selectAll("tbody tr")
.sort(function(a, b) {
return d3.descending(a.age, b.age);
});
function ColorLuminance(hex, lum) {
// validate hex string
hex = String(hex).replace(/[^0-9a-f]/gi, '');
if (hex.length < 6) {
hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
}
lum = lum || 0;
// convert to decimal and change luminosity
var rgb = "#", c, i;
for (i = 0; i < 3; i++) {
c = parseInt(hex.substr(i*2,2), 16);
c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
rgb += ("00"+c).substr(c.length);
}
return rgb;
}td, th {
padding: 2px 4px;
}
th {
font-weight: bold;
}<script type="text/javascript" src="http://mbostock.github.com/d3/d3.min.js"></script>
<div id="container"></div>
http://jsbin.com/qalaxu/edit?js
Stack Overflow用户
发布于 2019-09-28 11:55:19
你可以试试colorScale。https://bl.ocks.org/pstuffa/d5934843ee3a7d2cc8406de64e6e4ea5例如：
var colorScale = d3.scaleSequential(d3["interpolate" + scaleName])
.domain([0,10]);然后为每个单元格分配一种颜色
var td = rows.selectAll('td')
.style({"padding": "0px 10px 0px 10px"})
.data(function(d) { return d3.map(d).entries() })
.attr('class', function (d) { return d.key })
.style("fill", function(d) { return colorScale(d.value); });页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34986152
复制相关文章
相似问题
腾讯云开发者
