CODEWITHSUNDEEP
htmlcanvasd3.jssvg
holographix
holographix

Reputation: 2557

d3 canvas brush / selection

I am struggling to port a project a did in d3 svg to d3 canvas, what I have is basically a Focus+Context via Brushing, it's a spinoff of the classic example http://bl.ocks.org/mbostock/1667367, and I have a simple line chart instead of the area chart, but the principles are exactly the same.

Now, I successfully managed to convert the line chart from the ol'good svg d3 approach to the new canvas driven way. Just to clarify: 

              ctx.beginPath();
              draw_line.context(ctx)(data);
              ctx.lineWidth = 0.6;
              ctx.strokeStyle = "rgb(26,188,156)";
              ctx.stroke();

that's the stuff we r talking about.

Now, since I am in the canvas domain, I was under the impression that all the "svg-related" stuff is not going to work anymore, since it all relays on "g" object pulled from the svg, due to that reason stuff such as "brush" is not seem to be working any longer, which lead me here.

I have seen examples that zoom via scroll and stuff like that (e.g. http://bl.ocks.org/jgbos/9752277 ), plus I have seen that you can easily detect the scroll events with canvas as well, but it would be awesome for me to keep the exact same approach I had before ( the focus+context via brushing approach )

Is there any workaround, to get the job done with canvas in d3?

Upvotes: 1

Views: 1071

Answers (1)

Vinicius Folha
Vinicius Folha

Reputation: 109

This can be done by combining the zoomable canvas with an svg brush.

This example creates a canvas heatmap with zoom and no brush:
http://bl.ocks.org/tommct/8116740
This example uses an svg brush with a background canvas(Mona Lisa Histogram):
http://bl.ocks.org/mbostock/0d20834e3d5a46138752f86b9b79727e

Upvotes: 1

Related Questions