如何为表dc.datatable中的行代码着色？

Question

在DC.js github上，列出Stock Market Selection Strategy by Lon Riesberg作为使用dc.js库的示例。

他能够对行进行颜色编码，如下图所示，我试图模仿它。

请参阅此处查看我的代码：http://codepen.io/chriscruz/pen/myaWvR?editors=101

特别是，如何更改行的颜色以使名称为“Red”的所有行都为红色，名称“Blue”为蓝色，名称“White”为白色。

使用Javascript：

items = [
            {Id: "01", Name: "Red", Price: "1.00", Quantity: "1",TimeStamp:111},
            {Id: "02", Name: "White", Price: "10.00", Quantity: "1",TimeStamp:222},
            {Id: "04", Name: "Blue", Price: "9.50", Quantity: "10",TimeStamp:434},
            {Id: "03", Name: "Red", Price: "9.00", Quantity: "2",TimeStamp:545},
            {Id: "06", Name: "White", Price: "100.00", Quantity: "2",TimeStamp:676},
            {Id: "05",Name: "Blue", Price: "1.20", Quantity: "2",TimeStamp:777}
        ];

var ndx = crossfilter(items);


var Dim = ndx.dimension(function (d) {return d.Name;})
dc.dataTable("#Table")
  .width(250).height(800)
  .dimension(Dim)
  .group(function(d) {return ' '})
  .size(100)             // number of rows to return
  .columns([
  function(d) { return d.Id;},
  function(d) { return d.Name;},
  function(d) { return d.Price;},
  function(d) { return d.Quantity;},
  function(d) { return d.TimeStamp;},

])
  .sortBy(function(d){ return d.Price;})
  .order(d3.ascending);
dc.renderAll();

HTML：

<table class='table table-hover' id='Table'>
  <thead>
    <tr class='header'>
      <th>ID</th>
      <th>Name</th>
      <th>Price</th>
      <th>Quantity</th>
      <th>Timestamp</th>

    </tr>
  </thead>
</table>

考虑到dc.js只有大小，列，sortBy和顺序的属性，如何才能做到这一点？

Answer 1

您的codepen中存在语法错误和未知符号。我们的想法是使用chart.selectAll来抓取行，然后根据数据以某种方式为它们着色：

.renderlet(function(chart){
    chart.selectAll('tr.dc-table-row')
         .style('background-color', function(d) { 
             return d ? d.Name : null; 
         })
});

这是我的前叉：http://codepen.io/gordonwoodhull/pen/pvqpVV