[dc-js#105] implement mutli-selection in ordinal bar chart

NickQiZhu · NickQiZhu · commit 026ecae8ce7a · 2013-06-05T16:23:48.000-04:00
diff --git a/dc.js b/dc.js
@@ -2452,13 +2452,17 @@ dc.barChart = function (parent, chartGroup) {
         var extent = _chart.brush().extent();
 
         if (_chart.isOrdinal()) {
-            if (_chart.filter() != null)
+            if (_chart.hasFilter()) {
+                bars.classed(dc.constants.SELECTED_CLASS, function (d) {
+                    return _chart.hasFilter(_chart.keyAccessor()(d));
+                });
                 bars.classed(dc.constants.DESELECTED_CLASS, function (d) {
-                    var key = _chart.keyAccessor()(d);
-                    return key != _chart.filter();
+                    return !_chart.hasFilter(_chart.keyAccessor()(d));
                 });
-            else
+            } else {
+                bars.classed(dc.constants.SELECTED_CLASS, false);
                 bars.classed(dc.constants.DESELECTED_CLASS, false);
+            }
         } else {
             if (!_chart.brushIsEmpty(extent)) {
                 var start = extent[0];
diff --git a/dc.min.js b/dc.min.js
diff --git a/src/bar-chart.js b/src/bar-chart.js
@@ -144,13 +144,17 @@ dc.barChart = function (parent, chartGroup) {
         var extent = _chart.brush().extent();
 
         if (_chart.isOrdinal()) {
-            if (_chart.filter() != null)
+            if (_chart.hasFilter()) {
+                bars.classed(dc.constants.SELECTED_CLASS, function (d) {
+                    return _chart.hasFilter(_chart.keyAccessor()(d));
+                });
                 bars.classed(dc.constants.DESELECTED_CLASS, function (d) {
-                    var key = _chart.keyAccessor()(d);
-                    return key != _chart.filter();
+                    return !_chart.hasFilter(_chart.keyAccessor()(d));
                 });
-            else
+            } else {
+                bars.classed(dc.constants.SELECTED_CLASS, false);
                 bars.classed(dc.constants.DESELECTED_CLASS, false);
+            }
         } else {
             if (!_chart.brushIsEmpty(extent)) {
                 var start = extent[0];
diff --git a/test/bar-chart-test.js b/test/bar-chart-test.js
@@ -516,10 +516,11 @@ suite.addBatch({'ordinal bar chart': {
         assert.match(d3.select(chart.selectAll("rect.bar")[0][5]).attr("x"), /467.\d+/);
     },
     'should fade deselected bars': function (chart) {
-        chart.filter("Ontario").redraw();
+        chart.filter("Ontario").filter("Colorado").redraw();
         assert.isTrue(d3.select(chart.selectAll("rect.bar")[0][0]).classed("deselected"));
+        assert.isFalse(d3.select(chart.selectAll("rect.bar")[0][1]).classed("deselected"));
         assert.isFalse(d3.select(chart.selectAll("rect.bar")[0][5]).classed("deselected"));
-        assert.equal(stateDimension.top(Infinity).length, 2);
+        assert.equal(stateDimension.top(Infinity).length, 3);
     },
     teardown: function (topic) {
         resetAllFilters();
diff --git a/test/dc.css b/test/dc.css
@@ -5,6 +5,7 @@
 .dc-chart rect.bar {
     stroke: none;
     fill: steelblue;
+    cursor: pointer;
 }
 
 .dc-chart rect.bar:hover {
diff --git a/test/play-ground.html b/test/play-ground.html
@@ -799,14 +799,7 @@
         .group(stateGroup)
         .elasticY(true)
         .x(d3.scale.ordinal().domain(["California", "Colorado", "Delaware", "Mississippi", "Oklahoma", "Ontario"]))
-        .xUnits(dc.units.ordinal)
-        .renderlet(function(chart){
-            var colors =d3.scale.ordinal().domain(["California", "Colorado", "Delaware", "Mississippi", "Oklahoma", "Ontario"])
-                .range(["steelblue", "brown", "red", "green", "yellow", "grey"]);
-            chart.selectAll('rect.bar').each(function(d){
-                 d3.select(this).attr("style", "fill: " + colors(d.key));
-            });
-        });
+        .xUnits(dc.units.ordinal);
 
 var ordinalLineChart = dc.lineChart("#ordinal-line-chart");
 ordinalLineChart.width(500)

Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,7 @@`
`5`	`5`	`.dc-chart rect.bar {`
`6`	`6`	`stroke: none;`
`7`	`7`	`fill: steelblue;`
	`8`	`+ cursor: pointer;`
`8`	`9`	`}`
`9`	`10`
`10`	`11`	`.dc-chart rect.bar:hover {`