title: How can you get a chart (Pie Chart) to Group on a .csv string field in dc.js, d3.js and crossfilter.js (Node)
body: <p>I have several Dimensions and groups running successfully.  However, I have a chart, (Pie Chart) and I need to group it on a string that is a domain name, e.g. bing.com.  Every domain name is absolutely parsed to xxxx.xxx and the data is very clean. I am using dc.js and cross filter.js. The pie chart will draw, the data is correct but the problem is that the group will not link to the other groups, will not redraw correctly and throws NaN errors in Safari and Firefox like: </p>
  
  <pre><code>[Log] "google.com" (simple_vis.js, line 223) 
        *(This is the:console.log(chart.filter());)*
        [Log] [NaN, NaN] (simple_vis.js, line 242) 
        *(This is the same on the next chart.)*
        [Error] Error: Invalid value for &lt;rect&gt; attribute x="NaN"
        setAttribute ([native code], line 0)
        attrConstant (d3.js, line 578)
        (anonymous function) (d3.js, line 868)
        d3_selection_each (d3.js, line 874)
        each (d3.js, line 867)
        attr (d3.js, line 567)
        redrawX (d3.js, line 8120)
        (anonymous function) (d3.js, line 8050)
        (anonymous function) (d3.js, line 868)
        d3_selection_each (d3.js, line 874)
        each (d3.js, line 867)
        brush (d3.js, line 8029)
        call (d3.js, line 881)
        redrawBrush (dc.js, line 2149)
        doRedraw (dc.js, line 2276)
        redraw (dc.js, line 1033)
        redrawAll (dc.js, line 167)
        (anonymous function) (dc.js, line 1145)
        trigger (dc.js, line 504)
        onClick (dc.js, line 1143)
        (anonymous function) (dc.js, line 5305)
        onClick (dc.js, line 3283)
        (anonymous function) (d3.js, line 1036
  </code></pre>
  
  <p>Here is the the Data Sample, Dimension and Group and the Chart:</p>
  
  <p><strong>Data:</strong> Using ref_domain as the Group</p>
  
  <p>capture_date,           event_type,  vio_type, ref_domain</p>
  
  <p>2013-11 11T15:09:45Z,   "Violation",   "3",    "bing.com"</p>
  
  <p><strong>Dimension and Group:</strong></p>
  
  <pre><code>var startValue = ndx.dimension(function(d) {
  return d.ref_domain;
  
   });
   var startValueGroup = startValue.group();
   startValueGroup.top(Infinity).forEach(function(p, i) {
      console.log(p.key + ": " + p.value);
   });
  </code></pre>
  
  <p><strong>The Chart:</strong></p>
  
  <pre><code>         pieChart.width(200)
          .height(200)
          .transitionDuration(1500)       
          .dimension(startValue)
          .group(startValueGroup)
          .radius(90)
          .minAngleForLabel(0)        
          .label(function(d) { return d.data.key; })
          //.valueAccessor(function(d) {return d.ref_domain;})
          .on("filtered", function (chart) {
              dc.events.trigger(function () {
              if(chart.filter()) {
              console.log(chart.filter());
              volumeChart.filter([chart.filter()-.25,chart.filter()-(-0.25)]);
                  }
                  else volumeChart.filterAll();
              });
          });
  </code></pre>
  
  <p>Any help would be greatly appreciated.  Thanks!</p>