javascript - 如何为对象数组中的每个元素设置 d3 色标？

Question

我正在使用 d3 为对象数组生成 HTML 表。我想根据值范围使用渐变级别为背景着色。

我使用了应用于没有渐变的列的类别 10 域比例颜色。无论如何，是否可以将 min max 指定为 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 中的类似情况

Answer 1

如果我理解正确的话，你想从 category10() 转换颜色基于此颜色的渐变。

如果是这样:

1. 您可以使用函数.ColorLuminance()我发现here获得更浅的颜色，以便我们可以通过两种颜色创建渐变。
2. 使用 .attr() 将背景设置为渐变就像你做的那样，但不是 bgcolor ，设置style:backougrnd像这样:attr('style','background:linear-gradient(to bottom, ' + color(0) + ' 0%,' + ColorLuminance(color(0), 0.5) + ' 100%)');

完整代码:

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