add color fill to scatterplot

dc.css

@@ -267,6 +267,5 @@ div.dc-chart {
 }
 
 .dc-chart .symbol{
-    fill: steelblue;
     stroke: none;
 }

dc.js

@@ -2528,7 +2528,7 @@ dc.colorChart = function(_chart) {
 
     /**
     #### .colorDomain([domain])
-    Set or get the current domain for the color mapping function. The domain must be supplied as an arrary.
+    Set or get the current domain for the color mapping function. The domain must be supplied as an array.
 
     Note: previously this method accepted a callback function. Instead you may use a custom scale set by `.colors`.
 
@@ -2552,7 +2552,7 @@ dc.colorChart = function(_chart) {
 
     /**
     #### .getColor(d [, i])
-    Get the color for the datum d and counter i. This is used internaly by charts to retreive a color.
+    Get the color for the datum d and counter i. This is used internaly by charts to retrieve a color.
 
     **/
     _chart.getColor = function(d, i){
@@ -5545,6 +5545,7 @@ dc.scatterPlot = function (parent, chartGroup) {
             .enter()
         .append("circle")
             .attr("class", "symbol")
+            .attr("fill", _chart.getColor(0))
             .attr("transform", _locator);
 
         dc.transition(symbols, _chart.transitionDuration())

src/color-chart.js

@@ -79,7 +79,7 @@ dc.colorChart = function(_chart) {
 
     /**
     #### .colorDomain([domain])
-    Set or get the current domain for the color mapping function. The domain must be supplied as an arrary.
+    Set or get the current domain for the color mapping function. The domain must be supplied as an array.
 
     Note: previously this method accepted a callback function. Instead you may use a custom scale set by `.colors`.
 
@@ -103,7 +103,7 @@ dc.colorChart = function(_chart) {
 
     /**
     #### .getColor(d [, i])
-    Get the color for the datum d and counter i. This is used internaly by charts to retreive a color.
+    Get the color for the datum d and counter i. This is used internaly by charts to retrieve a color.
 
     **/
     _chart.getColor = function(d, i){

src/scatter-plot.js

@@ -15,6 +15,7 @@ dc.scatterPlot = function (parent, chartGroup) {
             .enter()
         .append("circle")
             .attr("class", "symbol")
+            .attr("fill", _chart.getColor(0))
             .attr("transform", _locator);
 
         dc.transition(symbols, _chart.transitionDuration())

test/scatterplot-test.js

@@ -41,9 +41,15 @@ suite.addBatch({
         },
 
         'should correctly place symbols': function (chart) {
-            assert.equal("translate(166.8013698630137,140)", symbol_by_index(chart, 0).attr("transform"));
-            assert.equal("translate(209.37671232876713,114)", symbol_by_index(chart, 3).attr("transform"));
-            assert.equal("translate(255.40410958904107,44)", symbol_by_index(chart, 5).attr("transform"));
+            assert.equal(symbol_by_index(chart, 0).attr("transform"), "translate(166.8013698630137,140)");
+            assert.equal(symbol_by_index(chart, 3).attr("transform"), "translate(209.37671232876713,114)");
+            assert.equal(symbol_by_index(chart, 5).attr("transform"), "translate(255.40410958904107,44)");
+        },
+
+        'should generate color fill for symbols': function(chart){
+            assert.equal(symbol_by_index(chart, 0).attr("fill"), '#1f77b4');
+            assert.equal(symbol_by_index(chart, 3).attr("fill"), '#1f77b4');
+            assert.equal(symbol_by_index(chart, 5).attr("fill"), '#1f77b4');
         }
     },
 

web/css/dc.css

@@ -267,6 +267,5 @@ div.dc-chart {
 }
 
 .dc-chart .symbol{
-    fill: steelblue;
     stroke: none;
 }

web/docs/api-1.7.0-dev.md

@@ -535,15 +535,15 @@ the index of a group.
 ```
 
 #### .colorDomain([domain])
-Set or get the current domain for the color mapping function. The domain must be supplied as an arrary.
+Set or get the current domain for the color mapping function. The domain must be supplied as an array.
 
 Note: previously this method accepted a callback function. Instead you may use a custom scale set by `.colors`.
 
 #### .calculateColorDomain()
 Set the domain by determining the min and max values as retrived by `.colorAccessor` over the chart's dataset.
 
 #### .getColor(d [, i])
-Get the color for the datum d and counter i. This is used internaly by charts to retreive a color.
+Get the color for the datum d and counter i. This is used internaly by charts to retrieve a color.
 
 ## <a name="stackable-chart" href="#stackable-chart">#</a> Stackable Chart [Abstract]
 Stackable chart is an abstract chart introduced to provide cross-chart support of stackability. Concrete implementation of

web/docs/index.html

@@ -519,12 +519,12 @@ <h4>.colorAccessor([colorAccessorFunction])</h4>
 <span class="comment">// color accessor for a multi-value crossfilter reduction</span>
 <span class="variable">.colorAccessor</span>(function(d){<span class="keyword">return</span> d<span class="variable">.value</span><span class="variable">.absGain</span>;})</code></pre>
 <h4>.colorDomain([domain])</h4>
-<p>Set or get the current domain for the color mapping function. The domain must be supplied as an arrary.</p>
+<p>Set or get the current domain for the color mapping function. The domain must be supplied as an array.</p>
 <p>Note: previously this method accepted a callback function. Instead you may use a custom scale set by <code>.colors</code>.</p>
 <h4>.calculateColorDomain()</h4>
 <p>Set the domain by determining the min and max values as retrived by <code>.colorAccessor</code> over the chart&#39;s dataset.</p>
 <h4>.getColor(d [, i])</h4>
-<p>Get the color for the datum d and counter i. This is used internaly by charts to retreive a color.</p>
+<p>Get the color for the datum d and counter i. This is used internaly by charts to retrieve a color.</p>
 <h2><a name="stackable-chart" href="#stackable-chart">#</a> Stackable Chart [Abstract]</h2>
 <p>Stackable chart is an abstract chart introduced to provide cross-chart support of stackability. Concrete implementation of
 charts can then selectively mix-in this capability.</p>

web/js/dc.js

@@ -2528,7 +2528,7 @@ dc.colorChart = function(_chart) {
 
     /**
     #### .colorDomain([domain])
-    Set or get the current domain for the color mapping function. The domain must be supplied as an arrary.
+    Set or get the current domain for the color mapping function. The domain must be supplied as an array.
 
     Note: previously this method accepted a callback function. Instead you may use a custom scale set by `.colors`.
 
@@ -2552,7 +2552,7 @@ dc.colorChart = function(_chart) {
 
     /**
     #### .getColor(d [, i])
-    Get the color for the datum d and counter i. This is used internaly by charts to retreive a color.
+    Get the color for the datum d and counter i. This is used internaly by charts to retrieve a color.
 
     **/
     _chart.getColor = function(d, i){
@@ -5545,6 +5545,7 @@ dc.scatterPlot = function (parent, chartGroup) {
             .enter()
         .append("circle")
             .attr("class", "symbol")
+            .attr("fill", _chart.getColor(0))
             .attr("transform", _locator);
 
         dc.transition(symbols, _chart.transitionDuration())