Auf der DC.js github, Stock Market Selection Strategy von Lon Riesberg ist als Beispiel für die Verwendung der Bibliothek dc.js aufgeführt.

Er konnte die Zeilen farblich kennzeichnen, wie in der folgenden Abbildung gezeigt, die ich zu imitieren versuche.

Siehe hier für meinen Code:http: //codepen.io/chriscruz/pen/myaWvR? editors = 101

Wie kann ich die Farbe der Zeilen ändern, sodass alle Zeilen mit dem Namen "Rot" rot, mit dem Namen "Blau" blau und mit dem Namen "Weiß" weiß sind?

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>

Wie könnte dies unter Berücksichtigung der einzigen Attribute erfolgen, die dc.js hat sind Größe, Spalten, sortBy und Reihenfolge?