heatmap labels

[gordonwoodhull]

As shown in #1301 Risk Matrix, it can be useful to have labels inside the heatmap rects.

This fork of @oingelsson's fiddle shows a possible implementation:
http://jsfiddle.net/gordonwoodhull/fL89vtn4/12/

[ufundo]

+1 and bump for the feature!

And thanks @gordonwoodhull @oinglesson for implementation.

I have just added a
_chart.selectAll('g.box-group text').remove();
line before appending the text label creation, to work with a crossfiltered table (currently it adds a new label each time the heatmap is redrawn, and these pile up one on top of the other).

This felt a bit hacky and like it would be better to create the text elements on the first render and then update their contents after that, but I couldn't get that to work :/

[gordonwoodhull]

Thanks for the review, @ufundo!

Here is a fork of the fiddle that replaces the labels correctly when data changes:

http://jsfiddle.net/gordonwoodhull/yt0wL8xb/25/

The pattern of doing selectAll and then binding to a one-element array is a good way to add a single element only if it is not there:

       var text = chartBoxes.selectAll('text').data(d => [d]);
       text.enter().append('text');
       text
          .attr('x', function (d, i) { return parseInt(d3.select(this.parentNode).select('rect').attr("x"),) + 40 })

That's the d3@3 (dc@2) version, because the fiddle is that old. The d3@4+ (dc@3+) version would be

       text = text.enter().append('text')
           .merge(text);

[ufundo]

@gordonwoodhull I never thanked you for this ─ much appreciated!