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

Question

在DC.js github上,Lon Riesberg的股票市场选择策略被列为使用dc.js库的示例.

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

在这里查看我的代码:http://codepen.io/chriscruz/pen/myaWvR？edit = 101

特别是,我如何更改行的颜色,以便名称为"红色"的所有行都是红色,名称"蓝色"为蓝色,名称"白色"为白色.

使用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的唯一属性是size,columns,sortBy和order,怎么办呢？

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