Fixes heatmap tests

Author: mtraynham

spec/heatmap-spec.js

@@ -75,11 +75,9 @@ describe("dc.heatmap", function() {
         });
 
         it('should position the y-axis labels with their associated rows', function() {
-            var yaxisTexts = chart.selectAll(".rows.axis text");
-            expect(+yaxisTexts[0][0].getAttribute("y")).toEqual(150 );
-            expect(+yaxisTexts[0][0].getAttribute("x")).toEqual(0);
-            expect(+yaxisTexts[0][1].getAttribute("y")).toEqual(50);
-            expect(+yaxisTexts[0][1].getAttribute("x")).toEqual(0);
+            var yaxisTicks = chart.selectAll(".rows.axis .tick");
+            expect(yaxisTicks[0][0].getAttribute("transform")).toEqual("translate(0,150)");
+            expect(yaxisTicks[0][1].getAttribute("transform")).toEqual("translate(0,50)");
         });
 
         it('should have labels on the y-axis corresponding to the row values', function() {
@@ -89,11 +87,9 @@ describe("dc.heatmap", function() {
         });
 
         it('should position the x-axis labels with their associated columns', function() {
-            var xaxisTexts = chart.selectAll(".cols.axis text");
-            expect(+xaxisTexts[0][0].getAttribute("y")).toEqual(200);
-            expect(+xaxisTexts[0][0].getAttribute("x")).toEqual(50);
-            expect(+xaxisTexts[0][1].getAttribute("y")).toEqual(200);
-            expect(+xaxisTexts[0][1].getAttribute("x")).toEqual(150);
+            var xaxisTexts = chart.selectAll(".cols.axis .tick");
+            expect(xaxisTexts[0][0].getAttribute("transform")).toEqual("translate(50,0)");
+            expect(xaxisTexts[0][1].getAttribute("transform")).toEqual("translate(150,0)");
         });
 
         it('should have labels on the x-axis corresponding to the row values', function() {
@@ -344,13 +340,13 @@ describe("dc.heatmap", function() {
         describe('on axis labels', function() {
             describe('with nothing previously filtered', function () {
                 it('should filter all cells on that axis', function () {
-                    chart.selectAll(".cols.axis text").each( function(d) {
+                    chart.selectAll(".cols.axis g").each( function(d) {
                         var axisLabel = d3.select(this);
                         axisLabel.on("click")(d);
                         assertOnlyThisAxisIsFiltered(chart, 0, d);
                         axisLabel.on("click")(d);
                     });
-                    chart.selectAll(".rows.axis text").each( function(d) {
+                    chart.selectAll(".rows.axis g").each( function(d) {
                         var axisLabel = d3.select(this);
                         axisLabel.on("click")(d);
                         assertOnlyThisAxisIsFiltered(chart, 1, d);
@@ -369,7 +365,7 @@ describe("dc.heatmap", function() {
 
                     var xVal = box.datum().key[0];
 
-                    var columns = chart.selectAll(".cols.axis text");
+                    var columns = chart.selectAll(".cols.axis g");
                     var column = columns.filter( function (columnData) {
                         return columnData == xVal;
                     });
@@ -393,7 +389,7 @@ describe("dc.heatmap", function() {
 
                     assertOnlyThisAxisIsFiltered(chart, 0, xVal);
 
-                    var columns = chart.selectAll(".cols.axis text");
+                    var columns = chart.selectAll(".cols.axis g");
                     var column = columns.filter( function (columnData) {
                         return columnData == xVal;
                     });

src/heatmap.js

@@ -188,10 +188,10 @@ dc.heatMap = function (parent, chartGroup) {
             .attr('class', 'heatmap')
             .attr('transform', 'translate(' + _chart.margins().left + ',' + _chart.margins().top + ')');
         _chartBody.append('g')
-            .attr('class', 'axis x')
+            .attr('class', 'cols axis')
             .attr('transform', 'translate(0,' + _chart.effectiveHeight() + ')');
         _chartBody.append('g')
-            .attr('class', 'axis y');
+            .attr('class', 'rows axis');
         _colScale.rangeRoundBands([0, _chart.effectiveWidth()]);
         _rowScale.rangeRoundBands([_chart.effectiveHeight(), 0]);
 
@@ -214,23 +214,29 @@ dc.heatMap = function (parent, chartGroup) {
         // Update axis
         _colAxis.scale(cols)
             .tickFormat(_chart.colsLabel());
-        dc.transition(_chartBody.select('g.axis.x'), _chart.transitionDuration())
-            .call(_colAxis)
-            .each('end', function () {
+        var _colAxisTransition = dc.transition(_chartBody.select('g.cols.axis'), _chart.transitionDuration())
+            .call(_colAxis);
+        _rowAxis.scale(rows)
+            .tickFormat(_chart.rowsLabel());
+        var _rowAxisTransition = dc.transition(_chartBody.select('g.rows.axis'), _chart.transitionDuration())
+            .call(_rowAxis);
+        // We need the clicks added after the transition.  Unfortunately, this is handled differently
+        // for selection/transition
+        if (_colAxisTransition.duration || _rowAxisTransition.duration) {
+            _colAxisTransition.each('end', function () {
                 d3.select(this)
                     .selectAll('g')
                     .on('click', _chart.xAxisOnClick());
             });
-
-        _rowAxis.scale(rows)
-            .tickFormat(_chart.rowsLabel());
-        dc.transition(_chartBody.select('g.axis.y'), _chart.transitionDuration())
-            .call(_rowAxis)
-            .each('end', function () {
+            _rowAxisTransition.each('end', function () {
                 d3.select(this)
                     .selectAll('g')
                     .on('click', _chart.yAxisOnClick());
             });
+        } else {
+            _colAxisTransition.selectAll('g').on('click', _chart.xAxisOnClick());
+            _rowAxisTransition.selectAll('g').on('click', _chart.yAxisOnClick());
+        }
 
         // Update boxes
         var boxes = _chartBody.selectAll('g.box-group')