Hacker News Reader

Comment by ejstronge | Hacker News Reader

I was thinking the same thing - it looks like the example used d3 mostly to simplify working with svg elements

This one actually uses the canvas element instead of svg. Just another awesome thing about D3: it works equally well with both. You can draw svg paths just as easily as you can draw them on a canvas.

Cool example of canvas[0] vs svg[1]. The canvas renders heavy animation a bit better. Both are around the same number of lines of code.

[0] http://bl.ocks.org/mbostock/9539958

[1] http://bl.ocks.org/mbostock/1062544

Ah! Thanks so much - I was wondering how this maze would work as a collection of svg elements. I'll look into using d3 with canvas for a project I'm doing.

IME, it gets pretty laggy beyond a few hundred svg elements. The catch to using canvas with d3 is that you lose the ability to bind event handlers to the canvas "elements" (since on a canvas they're not DOM elements, just pixels).

For my latest project I used a kineticjs canvas to get handlers on the canvas shapes. That's positioned on top of a d3-bound svg container. Best of both worlds, reasonable speed up to a couple thousand canvas shapes. Though it was quite tricky getting the same input events to trigger separate handlers on sibling dom elements. (Can't just let the events bubble up unless you make the canvas a child of the svg or vice-versa, but that approach creates more problems.)

Reply on news.ycombinator.com