Disable heatmap cell corner rounding

[amergin]

Is it possible to have sharp edges on the heatmap cells? I'm trying to plot something similar to http://www.frankvoisin.com/wp-content/uploads/2012/04/PreLehman.png

[amergin]

I can see I could do

    .renderlet( function(chart) {
      chart.selectAll("g.box-group > rect")
      .attr("rx", null)
      .attr("ry", null);
    });

but since renderlet is applied post-render it causes kind-of-annoying flickering for the edges, especially when cells are clicked on. Any way to get around this (besides modifying the source)?

[gordonwoodhull]

It doesn't look like you can change the rounding through CSS; however you might try the postRender hook.

Please let me know whether or not it works; there are a slew of similar tweaks that this hook should fix but I don't hear it talked about much. :-(

[amergin]

Same response, it seems to me (the API documentation says postRender is applied after renderlet?).

The best behavior I get if I do

    .renderlet( function(chart) {
      // rotate labels
      chart.selectAll('g.cols > text')
      .attr('transform', function(d) { 
        var ele = d3.select(this);
        return 'rotate(-90,' + ele.attr('x') + "," + ele.attr('y') + ")";
      })
      .style("text-anchor", "end")
      .attr("dy", function(d) { 
        return +d3.select(this).attr('dy')/2;
      });

      // remove rounded edges
      chart.selectAll("g.box-group > rect")
      .attr("rx", null)
      .attr("ry", null);          
    })
    .on('preRender', function(chart) {
      // try to hide flickering from renderlet
      chart.transitionDuration(0);
    })
    .on('postRender', function(chart) {
      chart.transitionDuration(500);
    });

As someone pointed out in the dc.js user group, playing around with transitionDuration helps a bit. The flicker is now noticeable only when setting/clearing a filter, but not on the initial draw.

[gordonwoodhull]

Thanks for the pointers.

What we really need is a hook that is completely synchronous, called before anything hits the screen. I can count a dozen things that people want to change without flicker, and I think the DOM can be manipulated many times without flicker, as long as control never escapes to the browser

[gordonwoodhull]

Duh.... I was thinking too generally. There are functions that just aren't documented. (I'm documenting them now.)

And.. it looks like they don't follow the style guide, but they work like this:

        heatmapChart.xBorderRadius(0);
        heatmapChart.yBorderRadius(0);

I will make them chainable now.