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

Question

我正在使用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中的类似场景

Answer 1

如果我理解正确，您希望将颜色从 category10() 转换为基于此颜色的渐变。

如果是这样：

1. 您可以使用我找到的here 的函数.ColorLuminance() 来获得更浅的颜色，这样我们就可以通过这两种颜色创建渐变。
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

Answer 2

你可以试试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); });