Skip to content

Commit d050bb3

Browse files
mtraynhammtraynham
committed
Using d3.svg.axis instead of custom axis implementation on heatmap
1 parent 3168274 commit d050bb3

File tree

3 files changed

+61
-62
lines changed

3 files changed

+61
-62
lines changed

‎spec/heatmap-spec.js

+10-14
Original file line numberDiff line numberDiff line change
@@ -76,11 +76,9 @@ describe('dc.heatmap', function () {
7676
});
7777

7878
it('should position the y-axis labels with their associated rows', function () {
79-
var yaxisTexts = chart.selectAll('.rows.axis text');
80-
expect(+yaxisTexts[0][0].getAttribute('y')).toEqual(150);
81-
expect(+yaxisTexts[0][0].getAttribute('x')).toEqual(0);
82-
expect(+yaxisTexts[0][1].getAttribute('y')).toEqual(50);
83-
expect(+yaxisTexts[0][1].getAttribute('x')).toEqual(0);
79+
var yaxisTicks = chart.selectAll('.rows.axis .tick');
80+
expect(yaxisTicks[0][0].getAttribute('transform')).toMatchTranslate(0, 150);
81+
expect(yaxisTicks[0][1].getAttribute('transform')).toMatchTranslate(0, 50);
8482
});
8583

8684
it('should have labels on the y-axis corresponding to the row values', function () {
@@ -90,11 +88,9 @@ describe('dc.heatmap', function () {
9088
});
9189

9290
it('should position the x-axis labels with their associated columns', function () {
93-
var xaxisTexts = chart.selectAll('.cols.axis text');
94-
expect(+xaxisTexts[0][0].getAttribute('y')).toEqual(200);
95-
expect(+xaxisTexts[0][0].getAttribute('x')).toEqual(50);
96-
expect(+xaxisTexts[0][1].getAttribute('y')).toEqual(200);
97-
expect(+xaxisTexts[0][1].getAttribute('x')).toEqual(150);
91+
var xaxisTexts = chart.selectAll('.cols.axis .tick');
92+
expect(xaxisTexts[0][0].getAttribute('transform')).toMatchTranslate(50, 0);
93+
expect(xaxisTexts[0][1].getAttribute('transform')).toMatchTranslate(150, 0);
9894
});
9995

10096
it('should have labels on the x-axis corresponding to the row values', function () {
@@ -355,13 +351,13 @@ describe('dc.heatmap', function () {
355351

356352
describe('with nothing previously filtered', function () {
357353
it('should filter all cells on that axis', function () {
358-
chart.selectAll('.cols.axis text').each(function (d) {
354+
chart.selectAll('.cols.axis g').each(function (d) {
359355
var axisLabel = d3.select(this);
360356
axisLabel.on('click')(d);
361357
assertOnlyThisAxisIsFiltered(chart, 0, d);
362358
axisLabel.on('click')(d);
363359
});
364-
chart.selectAll('.rows.axis text').each(function (d) {
360+
chart.selectAll('.rows.axis g').each(function (d) {
365361
var axisLabel = d3.select(this);
366362
axisLabel.on('click')(d);
367363
assertOnlyThisAxisIsFiltered(chart, 1, d);
@@ -380,7 +376,7 @@ describe('dc.heatmap', function () {
380376

381377
var xVal = box.datum().key[0];
382378

383-
var columns = chart.selectAll('.cols.axis text');
379+
var columns = chart.selectAll('.cols.axis g');
384380
var column = columns.filter(function (columnData) {
385381
return columnData === xVal;
386382
});
@@ -404,7 +400,7 @@ describe('dc.heatmap', function () {
404400

405401
assertOnlyThisAxisIsFiltered(chart, 0, xVal);
406402

407-
var columns = chart.selectAll('.cols.axis text');
403+
var columns = chart.selectAll('.cols.axis g');
408404
var column = columns.filter(function (columnData) {
409405
return columnData === xVal;
410406
});

‎src/heatmap.js

+42-45
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@ dc.heatMap = function (parent, chartGroup) {
2929
var _rowOrdering = d3.ascending;
3030
var _colScale = d3.scale.ordinal();
3131
var _rowScale = d3.scale.ordinal();
32+
var _colAxis = d3.svg.axis().orient('bottom');
33+
var _rowAxis = d3.svg.axis().orient('left');
3234

3335
var _xBorderRadius = DEFAULT_BORDER_RADIUS;
3436
var _yBorderRadius = DEFAULT_BORDER_RADIUS;
@@ -193,6 +195,13 @@ dc.heatMap = function (parent, chartGroup) {
193195
.append('g')
194196
.attr('class', 'heatmap')
195197
.attr('transform', 'translate(' + _chart.margins().left + ',' + _chart.margins().top + ')');
198+
_chartBody.append('g')
199+
.attr('class', 'cols axis')
200+
.attr('transform', 'translate(0,' + _chart.effectiveHeight() + ')');
201+
_chartBody.append('g')
202+
.attr('class', 'rows axis');
203+
_colScale.rangeRoundBands([0, _chart.effectiveWidth()]);
204+
_rowScale.rangeRoundBands([_chart.effectiveHeight(), 0]);
196205

197206
return _chart._doRedraw();
198207
};
@@ -210,17 +219,39 @@ dc.heatMap = function (parent, chartGroup) {
210219
rows = _rowScale.domain(rows);
211220
cols = _colScale.domain(cols);
212221

213-
var rowCount = rows.domain().length,
214-
colCount = cols.domain().length,
215-
boxWidth = Math.floor(_chart.effectiveWidth() / colCount),
216-
boxHeight = Math.floor(_chart.effectiveHeight() / rowCount);
222+
// Update axis
223+
_colAxis.scale(cols)
224+
.tickFormat(_chart.colsLabel());
225+
var _colAxisTransition = dc.transition(_chartBody.select('g.cols.axis'), _chart.transitionDuration(), _chart.transitionDelay())
226+
.call(_colAxis);
227+
_rowAxis.scale(rows)
228+
.tickFormat(_chart.rowsLabel());
229+
var _rowAxisTransition = dc.transition(_chartBody.select('g.rows.axis'), _chart.transitionDuration(), _chart.transitionDelay())
230+
.call(_rowAxis);
231+
// We need the clicks added after the transition. Unfortunately, this is handled differently
232+
// for selection/transition
233+
if (_colAxisTransition.duration || _rowAxisTransition.duration) {
234+
_colAxisTransition.each('end', function () {
235+
d3.select(this)
236+
.selectAll('g')
237+
.on('click', _chart.xAxisOnClick());
238+
});
239+
_rowAxisTransition.each('end', function () {
240+
d3.select(this)
241+
.selectAll('g')
242+
.on('click', _chart.yAxisOnClick());
243+
});
244+
} else {
245+
_colAxisTransition.selectAll('g').on('click', _chart.xAxisOnClick());
246+
_rowAxisTransition.selectAll('g').on('click', _chart.yAxisOnClick());
247+
}
217248

218-
cols.rangeRoundBands([0, _chart.effectiveWidth()]);
219-
rows.rangeRoundBands([_chart.effectiveHeight(), 0]);
249+
// Update boxes
250+
var boxes = _chartBody.selectAll('g.box-group')
251+
.data(_chart.data(), function (d, i) {
252+
return _chart.keyAccessor()(d, i) + '\0' + _chart.valueAccessor()(d, i);
253+
});
220254

221-
var boxes = _chartBody.selectAll('g.box-group').data(_chart.data(), function (d, i) {
222-
return _chart.keyAccessor()(d, i) + '\0' + _chart.valueAccessor()(d, i);
223-
});
224255
var gEnter = boxes.enter().append('g')
225256
.attr('class', 'box-group');
226257

@@ -240,45 +271,11 @@ dc.heatMap = function (parent, chartGroup) {
240271
.attr('rx', _xBorderRadius)
241272
.attr('ry', _yBorderRadius)
242273
.attr('fill', _chart.getColor)
243-
.attr('width', boxWidth)
244-
.attr('height', boxHeight);
274+
.attr('width', _colScale.rangeBand())
275+
.attr('height', _rowScale.rangeBand());
245276

246277
boxes.exit().remove();
247278

248-
var gCols = _chartBody.selectAll('g.cols');
249-
if (gCols.empty()) {
250-
gCols = _chartBody.append('g').attr('class', 'cols axis');
251-
}
252-
var gColsText = gCols.selectAll('text').data(cols.domain());
253-
gColsText.enter().append('text')
254-
.attr('x', function (d) { return cols(d) + boxWidth / 2; })
255-
.style('text-anchor', 'middle')
256-
.attr('y', _chart.effectiveHeight())
257-
.attr('dy', 12)
258-
.on('click', _chart.xAxisOnClick())
259-
.text(_chart.colsLabel());
260-
dc.transition(gColsText, _chart.transitionDuration(), _chart.transitionDelay())
261-
.text(_chart.colsLabel())
262-
.attr('x', function (d) { return cols(d) + boxWidth / 2; })
263-
.attr('y', _chart.effectiveHeight());
264-
gColsText.exit().remove();
265-
var gRows = _chartBody.selectAll('g.rows');
266-
if (gRows.empty()) {
267-
gRows = _chartBody.append('g').attr('class', 'rows axis');
268-
}
269-
var gRowsText = gRows.selectAll('text').data(rows.domain());
270-
gRowsText.enter().append('text')
271-
.attr('dy', 6)
272-
.style('text-anchor', 'end')
273-
.attr('x', 0)
274-
.attr('dx', -2)
275-
.on('click', _chart.yAxisOnClick())
276-
.text(_chart.rowsLabel());
277-
dc.transition(gRowsText, _chart.transitionDuration(), _chart.transitionDelay())
278-
.text(_chart.rowsLabel())
279-
.attr('y', function (d) { return rows(d) + boxHeight / 2; });
280-
gRowsText.exit().remove();
281-
282279
if (_chart.hasFilter()) {
283280
_chart.selectAll('g.box-group').each(function (d) {
284281
if (_chart.isSelectedNode(d)) {

‎style/dc.scss

+9-3
Original file line numberDiff line numberDiff line change
@@ -232,9 +232,15 @@ div.dc-chart {
232232
fill-opacity: 0.5;
233233
fill: $color_celeste;
234234
}
235-
g.axis text {
236-
pointer-events: all;
237-
cursor: pointer;
235+
g.axis {
236+
text {
237+
pointer-events: all;
238+
cursor: pointer;
239+
}
240+
.domain,
241+
.tick line {
242+
opacity: 0;
243+
}
238244
}
239245
}
240246
.empty-chart .pie-slice {

0 commit comments

Comments
 (0)