如何对 table 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

您的代码笔中存在语法错误和未知符号。这个想法是使用 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

如何对 table dc.datatable 中的行进行颜色编码？

How to color code rows in a table dc.datatable?

html

javascript

css

dc.js