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

Question

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

我使用了一个类别10域缩放颜色应用于没有渐变的列。无论如何要指定最小值为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); });